1、什么是Grid布局
Grid
布局即网格布局,是一种新的css
模型,一般是将一个页面划分成几个主要的区域,定义这些区域的大小、位置和层次等关系,是目前唯一一种css
二维布局。
2、和flex
布局的区别
Grid
布局和flex
布局是有实质性的区别的,flex
是一维布局,只能处理一个维度上的布局,一行或者是一列。但是Grid
布局是二维布局 ,将容器划分成了“行”和“列”,产生了一个个的网格,可以将网格元素放在行和列相关的位置上,从而达到了布局的目的。
flex
布局示例:
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EvPhz2Tm-1650274526450)(image-20220418170327412.png)]](https://i-blog.csdnimg.cn/blog_migrate/1f8faf0ed5797211fd64756e91307287.png#pic_center)
Grid
布局示例:
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MkDsHpXv-1650274526451)(image-20220418172044225.png)]](https://i-blog.csdnimg.cn/blog_migrate/fcc671e2ab58e100a4c07108456d2e2f.png#pic_center)