grid布局是目前CSS3里最强大的布局了。它将网页化成了一个又一个的网格，可以通过不同的操作，来做出各种各样的效果了。flex布局本质上还是所有的子元素排列在一条线上，尽管子元素较多时，可以回行显示，但是在逻辑上仍是同一个。但是如果子元素要布局成行行列式
基本概念
在学习grid布局之前，我们需要了解一些基本概念
1.容器和项目
采用网格布局的区域，称为“容器”。容器内部的采用网格定位的子元素称为“项目”
上面的代码中，main就是容器，son就是项目
1.1 行、列和单元格
容器里面的水平区域称为“行”，垂直区域称为“列”，行列重叠出来的空间组成单元格
1.2 网格线
划分网格的线，称为”网格线“
黄色的代表是列的网格线，绿色代表的是行的网格线
Grid和flex类似，布局的属性都是分为两类，一类定义在容器上，称为容器属性，一类定义在项目上，称为项目属性
开启Grid
如何将一个容器变成容器呢？ 可以通过下面的属性来设置：
可以将容器变为一个块级容器，容器内部采用网格布局，可以将容器变为一个行内块容器，容器内部采用网格布局。
常用的容器属性
行和列的划分
在容器的身上开启了网格布局之后，就可以来规划行和列。主要应用到下面的两个属性：
除了基本的px,em之外。可以使用auto和百分比
repeat() 函数
在设置行高和列宽的时候，如果多个值重复的定义不免有些麻烦，所幸提供了函数，通过函数可以实现批量的设置行高和列宽。例如上面的三行三列宽高各200px的网格，就可以通过下面的方式来设置：
grid-template-areas 构建网格区域
网格元素可以向行或着列的方向扩展一个或多个单元，并且会创建一个网格区域。网格区域的形状应该是一个矩形 - 也就是说你不可能创建出一个类似于"L"形的网格区域。下图高亮的网格区域扩展了2列以及2行。
grid-template-areas是用字符串来构建网格和区域的关系的，然后在子属性中的grid-area属性命名为对应的字符，然后就会一一对应其中的关系。比如
比如：
grid-auto-flow
用来设置项目是“先行后列”，还是“先列后行”的。主要就两个值
column：纵向排列
row:横向排列
row dense：按行来填充网格中前面留下的空白
column dense：按列来填充网格中前面留下的空白
column
有无dense的区别
网格间距
网格间距（Column Gap）指的是两个网格单元之间的网格横向间距或网格纵向间距。
您可以使用以下属性来调整间隙大小：
下实例使用 grid-column-gap 属性来设置列之间的网格间距：
以下实例使用 grid-row-gap 属性来设置行之间的网格间距：
grid-gap 属性是 grid-row-gap 和 the grid-column-gap 属性的简写:
后面的属性其实跟flex布局很接近了，所以就不演示了
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/207993.html