简介
grid将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。
使用的用法为：
- display: grid; 块级元素
- display: inline-grid;行内元素
设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
概念
行： 容器内部的横轴称为行row
列： 容器内部的纵轴称为行column
单元格：行列交叉产生的区域，一个容器中会存在 row * column个单元格
网格线：划分单元格的线，水平网格线（row+1个）划分出行，垂直网格线（column+1个）划分出列。
属性
grid容器属性
grid-template-columns
定义列宽（每一列的列宽）
- 使用绝对单位（px）
// eg：当前的有1行，3列，设置每一列的列宽依次为： 100px，200px，300px。
display: grid;
grid-template-columns: 100px 200px 300px;
- 使用百分比（%）
// eg：当前的有1行，3列，设置每一列的列宽依次为： 10%，20%，30%。
display: grid;
grid-template-columns: 10% 20% 30%
-
repeat(m， n)
可以使用repeat()函数，简化重复的值
- m：是重复的次数
- n： 所要重复的值、重复某种模式
// eg：当前的有1行，3列，设置每一列的列宽依次为： 33.33%，33.33%，33.33%。
display: grid;
grid-template-columns: repeat(3, 33.33%);
// eg：当前有1行，6列，第1、第4列的列宽为10px，第2、第5列的列宽为20px，第3、第6列的列宽为30px
display: grid;
grid-template-columns: repeat(2, 10px 20px 30px);
-
auto-fill
容器大小不确定，但单元格大小固定，希望每一列容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。
// eg：列宽为200px，然后自动填充，直到容器不能放置更多的列。
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
-
fr
fraction 的缩写，意为"片段"，它的存在是为了更为方便的饿表示比例关系，eg： A = 1fr，B = 2fr，则表示B= 2A；
可以与绝对长度的单位一起使用
// eg： 第一列的宽度为150像素，第二列的宽度是第三列的一半
display: grid;
grid-template-columns: 150px 1fr 2fr;
-
minmax(m, n)
- m: 最小值
- n: 最大值
minmax()函数产生一个长度范围，表示长度就在这个范围之中。
// eg: 一行三列，第一第二列宽度相等，第三列的宽度不能小于100px，也不能超过第一第二列
display: grid;
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
-
auto
由浏览器决定列的宽度
display: grid;
grid-template-columns: 100px auto 100px;
grid-template-rows
定义行高（每一行的行高），下面可使用绝对单位（px），也可以使用百分比（%）。
- 使用绝对单位（px）
// eg：当前的有3行，1列，设置每一行的行高依次为： 100px，200px，300px。
display: grid;
grid-template-rows: 100px 200px 300px;
// eg：当前的有3行，2列，设置每一行的行高依次为： 100px，200px，300px。每一列的列宽为100px
display: grid;
grid-template-rows: 100px 200px 300px;
- 使用百分比（%）
// eg：当前的有3行，1列，设置每一行的高度依次为： 10%，20%，30%。
display: grid;
grid-template-rows: 10% 20% 30%
-
repeat(m， n)
可以使用repeat()函数，简化重复的值
- m：是重复的次数
- n： 所要重复的值、重复某种模式
// eg：当前的有3行，1列，设置每一行的行高依次为： 33.33%，33.33%，33.33%。
display: grid;
grid-template-rows: repeat(3, 33.33%);
// eg：当前有6行，1列，第1、第4行的行高为10px，第2、第5行的行高为20px，第3、第6行的行高为30px
display: grid;
grid-template-rows: repeat(2, 10px 20px 30px);
-
auto-fill
容器大小不确定，但单元格大小固定，希望每一列容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。
// eg：行高为200px，然后自动填充，直到容器不能放置更多的列。
display: grid;
grid-template-rows: repeat(auto-fill, 200px);
-
fr
fraction 的缩写，意为"片段"，它的存在是为了更为方便的饿表示比例关系，eg： A = 1fr，B = 2fr，则表示B= 2A；
可以与绝对长度的单位一起使用
// eg： 第一行的行高为150像素，第二行的行高是第三行的一半
display: grid;
grid-template-rows: 150px 1fr 2fr;
-
minmax(m, n)
- m: 最小值
- n: 最大值
minmax()函数产生一个长度范围，表示长度就在这个范围之中。
// eg: 三行一列，第一第二行行高相等，第三行的行高不能小于100px，也不能超过第一第二列
display: grid;
grid-template-rows: 1fr 1fr minmax(100px, 1fr);
-
auto
由浏览器决定列的高度
display: grid;
grid-template-rows: 100px auto 100px;
row-gap
设置行与行的间隔（行间距）。
// eg：3行1列，每行高度为100px，设置行与行之间的间距为20
display: grid;
grid-template-rows: repeat(3 100px);
row-gap: 20px;
column-gap
设置列与列的间隔（列间距）
// eg：1行3列，每列列宽为100px，设置列与列之间的间距为20
display: grid;
grid-template-columns: repeat(3 100px);
column-gap: 20px;
gap
是grid-row-gap和grid-column-gap的合并简写形式，gap：grid-row-gap grid-column-gap，如果省略了第二个值，浏览器认为第二个值等于第一个值。
// eg：3行3列，每列列宽为100px，每行高度为100px，设置列与列、行与行之间的间距为20
display: grid;
grid-template-columns: repeat(3 100px);
grid-template-rows: repeat(3 100px);
gap: 20px;
// 或者 gap: 20px 20px;
// 或者 column-gap: 20px; row-gap: 20px;
网友评论