grid
网格布局，flex是一维的，grid是二维的。
和flex一样，grid的概念也有三个，一个是整体的容器，一个是格子，一个是格子中存放的元素(也就是grid子元素)；
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PSARlw6i-1692416147621)(./images/grid.png)]
概念
容器和项目
在元素上声明 display：grid 或 display：inline-grid 来创建一个网格容器。这个元素的所有直系子元素将成为网格项目。
网格轨道：
grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。容器内部的水平区域称为行，垂直区域称为列。
网格单元
一个网格单元是在一个网格元素中最小的单位， 从概念上来讲其实它和表格的一个单元格很像。
网格线
划分网格的线，称为"网格线"。应该注意的是，当我们定义网格时，我们定义的是网格轨道，而不是网格线。Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。
m 列有 m + 1 根垂直的网格线，n 行有 n + 1 跟水平网格线。
一般而言，是从左到右，从上到下，1，2，3 进行编号排序。当然也可以从右到左，从下到上，按照 -1，-2，-3…顺序进行编号排序
使用
- display: grid
- display: inline-grid
理解参考flex；
当一个父元素使用grid显示，它内部就是grid子元素。
分配item空间大小对于子元素的意义
指定grid的大小，指定的大小是整个元素的所有区域(包括margin)；
行列指定
隐式和显示网格
显式网格包含了你在 grid-template-columns 和 grid-template-rows 属性中定义的行和列。如果你在网格定义之外又放了一些东西，或者因为内容的数量而需要的更多网格轨道的时候，网格将会在隐式网格中创建行和列;
假如有多余的网格（也就是上面提到的隐式网格），那么它的行高和列宽可以根据 grid-auto-columns 属性和 grid-auto-rows 属性设置。它们的写法和grid-template-columns 和 grid-template-rows 完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高
默认排列
默认布局就是常规布局，item由内部元素内容撑开。
grid容器属性
grid-template-rows: 100px 100px 200px;
指定几个就是指定几行，数值指定的行的高度
-
grid-template-rows: repeat(10, 100px); 指定10个100px
-
grid-template-rows: repeat(autofill, 100px); 每列100px，自动填充完毕父元素宽度
-
grid-template-rows: 1fr 1fr 2fr;
fraction – 分数，就是按比例对父元素进行分配
-
grid-template-rows: repeat(4, 1fr); 平均分为4份
网格线可以进行命名，命名之后，就可以在原本使用网格线索引的位置直接使用自定义命名的网格线。
grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];-
grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
可以指定的值：
- 100px 固定值
- 1fr 相当比例
- auto 自动扩充
- minmax() 最大最小范围
- auto-fill 列数量、行数量自适应
- repeat() 重复几个数字 repeat(auto-fill, 100px);
grid-template-columns: 100px 100px 100px;
指定几个就是指定几列，数值指定的是列的长度
grid-auto-rows: 200px
当没有指定行方向的
grid-column-gap: 10px
列与列之间单元格的间隔
grid-row-gap: 10px
行与行之间单元格的间隔
grid-template-areas
定义区域，定义完毕后可以在网格元素使用grid-area中引用区域
grid-template-areas: 'a b c'
'a b c'
'a b c';
定义单元格区域，匿名区域使用.表示；
区域的命名会影响到网格线，每个区域的起始网格线会自动命名为区域名-start；终止网格线会自动命名为区域名-end；
grid-auto-flow
划分网格后，容器的子元素会按照顺序，自动放置在每一个网格
- row 该关键字指定自动布局算法按照通过逐行填充来排列元素，在必要时增加新行。如果既没有指定 row 也没有 column，则默认为 row。
- column 该关键字指定自动布局算法通过逐列填充来排列元素，在必要时增加新列。
- dense 该关键字指定自动布局算法使用一种“稠密”堆积算法，如果后面出现了稍小的元素，则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白，但同时也可能导致原来出现的次序被打乱。
place-items
-
justify-items 单元格中元素水平方向的对齐方式
-
align-items 单元格中元素垂直方向的对齐方式
-
start | end | center | stretch 上、中、下、拉伸
place-content
指定整个内容区域的排布方式
justify-contentalign-contentstart | end | center | stretch | space-around | space-between | space-evenly;
指定行列的数据
- 100px 固定像素
- 1fr 按比例分配
- minmax(100px, 1fr) 指定最大最小值
- auto 由浏览器决定大小，直接将剩余空间占据
grid元素属性
grid-column-start: 1
规定从哪一列开始显示项目，或者跨越多少列
grid-column-end: 3
规定在哪一条列线（column-line）上停止显示项目，或跨越多少列。
grid-row-start: 1
grid-row-end: 3
指定的是网格线，指定元素占据网格范围，网格线索引从1开始；
简写：
grid-column: 1 / 3grid-row: 1 / span 2- 负数为网格从后往前数的位置
place-self
注意
子元素内容撑开grid网格
当网格高度或者宽度设置为fr或者auto的时候，当子元素高度或者宽度超过了网格设置，子元素会将网格撑开；
解决方法
- 将网格宽度或者高度设置为px、百分比，但是此时不能设置
grid-gap，设置之后就会出现子元素内容溢出的问题
- 网格中的元素设置
overflow: hidden
- 网格元素设置
width: 100%; height: 100%; overflow: hidden之后，如果子元素越界，可以将对应的子元素设置为width: 100%; height: 100%; overflow: auto，这样就可以通过滑动进行子元素全部内容查看
grid-gap设置导致内容溢出
此时要留意gird-template-rows或者gird-template-columns的设置是不是用的百分比或者固定数值，如果是的话，那么设置grid-gap就可能会造成内容溢出，就百分比而言，grid整体长度和宽度是先计算百分比，后叠加grid-gap；此时可以使用fr的形式，这种情况下会刨除grid-gap后再去计算fr，这样就可以避免内容溢出；
grid格子与padding
grid格子分配的是grid元素content内容区的区域，因此如果当子元素超过grid单元格的时候，就会出现滚动条(overflow: auto)；而滚动条会紧贴grid格子，可以通过设置padding来分隔开这两部分，看起来会更舒服。
移动端使用grid栅格元素高度为整个grid容器高度
这个要排查一下grid元素是否有设置display: grid，没哟设置改属性，即使设置了grid-template-rows；然后grid栅格元素中设置了height: 100%之后，栅格子元素的高度就会直接为grid元素的高度，而不是栅格的高度。
