css-grid使用

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

当没有指定行方向的

• auto 内容撑开

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-content
• align-content
• start | 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 / 3
• grid-row: 1 / span 2
• 负数为网格从后往前数的位置

place-self

• justify-self
• align-self

注意

子元素内容撑开grid网格

当网格高度或者宽度设置为fr或者auto的时候，当子元素高度或者宽度超过了网格设置，子元素会将网格撑开；

解决方法

1. 将网格宽度或者高度设置为px、百分比，但是此时不能设置grid-gap，设置之后就会出现子元素内容溢出的问题
2. 网格中的元素设置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元素的高度，而不是栅格的高度。