前言
CSS Grid的功能远比我们想象的要强，很多人对Gird布局仅仅局限于了解或者一知半解，殊不知它是CSS语言中最牛逼的部分之一。
参数
grid-column-start
用于指定网格项目在列方向上的起始位置。通过定义项目从哪条列线开始放置，你可以精确控制其在网格中的布局。
grid-column-start 用于水平方向
grid-row-start 用于垂直方向
支持负数
示例
.container {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
.item {
grid-column-start: 2; /* 从第2列线开始 */
}grid-column-end
用于指定网格项目在列方向上的结束位置。
grid-column-end 用于水平方向
grid-row-end 用于垂直方向
支持负数
示例
.container {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
.item {
grid-column-start: 1;
grid-column-end: 4;
}span
用于指定网格项目在列方向上跨越的宽度。
请注意 span 只能是正值。
示例
.container {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
.item {
grid-column-start: 1;
grid-column-end: span 2;
}grid-column
用于同时设置 grid-column-start 和 grid-column-end。
同时也支持 span
示例
.container {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
.item {
grid-column: 2 / 4; /* 第二列线开始，到第四列线结束 */
/* 相对于第五列线，初始位置向左跨越两列 */
/* grid-column: span 2 / 4; */
}grid-row
用于同时设置 grid-row-start 和 grid-row-end。
同样也支持 span
示例
.container {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
.item {
grid-row: span 3 / -1;
}grid-area
grid-area属性接受4个由 / 分开的值：grid-row-start, grid-column-start, grid-row-end, 最后是grid-column-end。
同时也支持 span
示例
.container {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
.item {
grid-area: 1 / 1 / 3 / 6;
}order
order属性用于控制网格项目在网格中的显示顺序。默认情况下，所有网格项目顺序都是0，但是顺序也可以被任意设置为正数或者负数，就像 z-index 一样。
注意：order属性只影响网格项目在网格中的显示顺序，而不影响其位置。
示例
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
.water {
order: 0;
}
#poison {
order: 1; /* 该项会被放在最后面 */
}grid-template-columns
grid-template-columns属性用于设置网格的列数，并且可以设置列的宽度。
示例
#garden {
display: grid;
/* 5行3列 */
grid-template-columns: 50% 30% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
grid-column: 1;
grid-row: 1;
}repeat
repeat() 函数用于重复一个模板。
比如 5 列宽度均为 20% 的模板，可以写成 grid-template-columns: repeat(5, 20%);
fr
网格系统也引入了一个新的单位，分数fr。每一个fr 单元分配一个可用的空间。比如说，如果两个元素分别被设置为1fr和3fr，那么空间就会被平均分配为4份；第一个元素占据1/4，第二个元素占据3/4。
fr 和 % 的区别
- % 模式下：随着父容器的缩放，当子容器分配到的空间过小时，容器会被挤压
- fr 模式下：即使父容器宽度再小，子容器都不会被挤压，能保持正常展示
grid-template
grid-template 属性是 grid-template-rows 和 grid-template-columns 的简写。
比如说，grid-template: 50% 50% / 200px;将创建一个具有两行的网格，每一行占据50%，以及一个200像素宽的列。
gap
gap 属性是 grid-row-gap 和 grid-column-gap 的简写。
gap 属性接受两个参数，第一个参数是行间距，第二个参数是列间距。
minmax
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 100px), 1fr));
}auto-fit网格项会拉伸以填充整个网格容器的宽度，即便是在网格项不足以填满行时minmax()定义的范围大于或等于 min， 小于或等于 maxmin()函数，返回两个参数中的最小值
grid-auto-columns
grid-auto-columns 属性用于定义自动生成的网格项的宽度。
结尾
这里推荐一个 Grid布局 练习网站。