父容器
display: grid;display: inline-grid;
设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。column-gap：列间距
row-gap： 行间距
grid-gap: <row-gap> <column-gap>;网格线，3 x 3 行的网格有 4 x 4 根网格线，每根线，从 row 或 column 方向从 1 开始递增。
demo item-1 将一个项目放到网格固定的位置，通过 start、end 可以横跨单元格，其值可以是数字（代表网格线的名字），可以是span关键字，代表占用几个单元格。
grid-row-start
grid-row-end
grid-column-start
grid-column-end
demo item-2 grid-row、grid-column
grid-row : <grid-row-start> / <grid-row-end>
grid-column同理
demo item-3 grid-area
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end
实例
.container {
display: grid;
/* 分 3 列，每列宽 100px */
grid-template-columns: 100px 100px 100px;
/* 分 3 行，每行高 100px */
grid-template-rows: 100px 100px 100px;
}
#container{
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
}
#container{
display: grid;
grid-template-columns: repeat(3, 100px);
}
repeat() 接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。
#container{
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
}
上面代码表示每列宽度 100px，然后自动填充，直到容器不能放置更多的列。
- fr关键字 比例关系，可以与绝对长度的单位结合使用
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
- minmax() 长度范围
#container{
display: grid;
grid-template-columns: repeat(3, minmax(100px, 1fr));
}
表示最小 100px，最大 1fr。
- auto 由浏览器自己决定长度
#container{
display: grid;
grid-template-columns: 100px 100px auto;
}
https://learncssgrid.com/
https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
