网格布局（Grid）是最强大的 CSS 布局方案
grid布局 和 flex布局的区别
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。
Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
Grid 布局的基本术语
- 容器——采用网格布局的区域
- 项目——容器内采用网格定位的子元素（项目只能是容器的顶层子元素，不包含项目的子元素，如下方代码的
元素就不是项目。Grid 布局只对项目生效。）
<div> <div><p>1</p></div> <div><p>2</p></div> <div><p>3</p></div> </div>
上面代码中，最外层的
元素是容器，内层的三个
元素是项目。
Grid 布局的使用方法
启用网格布局 display: grid
块级容器（宽度撑满整行）时
display: grid;
行内容器（宽度随内容自适应）时
display: inline-grid;
使用网格布局后，项目的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
划分列 grid-template-columns
绝对值 px
在容器内划分出3列，每列宽度为100px
grid-template-columns: 100px 100px 100px;
百分比值 %
将容器等分为3列，每列宽度为容器总宽度/3
grid-template-columns: 33.33% 33.33% 33.33%;
比例值 fr
将容器划分为2列，第1列的宽度 ：第2列的宽度 = 1:2
grid-template-columns: 1fr 2fr;
fr 是fraction 的缩写，意为"片段"，可以与绝对长度的单位结合使用
grid-template-columns: 150px 1fr 2fr;
第一列的宽度为150像素，第二列的宽度是第三列的一半
- 如果所有fr值之和大于1，则按fr值的比例划分可自动分配尺寸。
- 如果所有fr值之和小于1，最终的尺寸是可自动分配尺寸和fr值的乘法计算值。
和auto关键字混合使用
fr值的可自动分配尺寸是容器尺寸减去设置auto关键字的列的fit-content尺寸。在本例中，由于设置auto关键字的这一列里面内容比较少，fit-content尺寸就是这几个字符的宽度尺寸，因此，最终的尺寸表现就是最后3列按照1:1:1的比例平分了容器尺寸减去“宽度auto”这几个字符的宽度得到的尺寸。
minmax()函数值
minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。
repeat()函数值
repeat()接受两个参数，第一个参数是重复的次数，第二个参数是要重复的值。
grid-template-columns: repeat(3, 33.33%);
或
grid-template-columns: repeat(2, 100px 20px 80px);
上方代码定义了6列，第一列和第四列的宽度为100px，第二列和第五列为20px，第三列和第六列为80px。
无法确定列数时，重复次数使用关键字：auto-fill 或 auto-fit
.container { grid-template-columns: repeat(auto-fill, 100px); } .container { grid-template-columns: repeat(auto-fit, 100px); }
关键字往往会和其他网格布局函数一起使用，例如minmax()函数
.container { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
这就实现了无论grid容器多宽，grid子项都会等比例充满grid容器（因为设置了1fr），同时保证宽度不小于100px，网格布局的列数自动计算分配的智能弹性布局效果。
使用auto-fill关键字自动填充的时候，repeat()函数不能和auto一起使用的，但可以与长度值和百分比值一起使用。
.container { /* 有效 -- 每一行的最后一列的宽度都会是容器的20%大小 */ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr))20%; }
使用auto-fit关键字实现的布局效果要比auto-fill关键字实现的更符合常规的布局需求，效果见
repeat()函数auto-fit关键字效果 » CSS新世界demo演示
fit-content()函数
让尺寸适应于内容，但不超过设定的尺寸，常用于希望grid子项的宽度随着内容变化，但是又不希望宽度太大的场景。
.container { display: grid; grid-template-columns: fit-content(100px) fit-content(100px) 40px auto; }
fit-content()函数只支持数值和百分比值，fr值是不合法的。
min-content
最小内容尺寸中最大的那个最小内容尺寸值。网格布局中的同一行grid子项的高度和同一列grid子项的宽度都是一致的，因此min-content指的并不是某一个格子的最小内容尺寸，而是一排或者一列格子中所有最小内容尺寸中最大的那个最小内容尺寸值。
max-content
max-content关键字和min-content关键字类似，只是最终的尺寸是最大内容宽度中最大的那一个值。
auto
由浏览器自己决定长度
尺寸的上限是最大内容尺寸的最大值，但是不同于max-content关键字，max-content关键字的尺寸是固定的，这里的尺寸是会受到justify-content属性和align-content属性影响的。计算规则有些复杂，了解即可。
grid-template-columns: 100px auto 100px;
第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于最大宽度。
划分行 grid-template-rows
使用方法与列相同
grid-template-rows: 100px 100px 100px; 或 grid-template-rows: 33.33% 33.33% 33.33%;
范例
.container { grid-template-columns: 80px auto 100px; grid-template-rows: 25% 100px auto 60px; }
自动填充 auto-fill
单元格大小固定，但容器大小不确定时，如果希望每一行（或每一列）容纳尽可能多的单元格，可以使用auto-fill关键字进行自动填充。
grid-template-columns: repeat(auto-fill, 100px);
每列宽度100px，然后自动填充，直到容器不能放置更多的列。
给网格线命名 []
在grid-template-columns属性和grid-template-rows属性中，使用方括号指定每一根网格线的名字，方便以后的引用。
.container { display: grid; grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]; grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4]; }
上面代码指定网格布局为3行 3列，因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字。
由于网格的中间区域的网格线是由两边格子公用的，因此，可以给网格线起两个名称（使用空格分隔），分别表示网格线的两侧。
.container { grid-template-columns: [广告区-左] 120px [广告区-右 内容区-左] 600px [内容区-右]; }
设置行/列的间距
设置行间距 row-gap
row-gap: 20px;
支持数值和百分比值
设置列间距 column-gap
column-gap: 30px;
支持数值和百分比值
gap
是column-gap和row-gap合并的简写形式
gap: 20px 30px;
如果gap省略了第二个值，浏览器认为第二个值等于第一个值。
支持数值和百分比值和calc()函数
指定区域 grid-template-areas
可以将网格布局中的某个单元格或多个单元格定义为一个区域
网格区域一定要形成规整的矩形区域，无论是L形，还是凹的或凸的形状都会认为是无效的属性值。
区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动
命名为区域名-end。比如，区域名为header，则起始位置的水平网格线和垂直网格线叫做header-start，终止位置的水平网格线和垂直网格线叫做header-end。
.container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; grid-template-areas: 'a b c' 'd e f' 'g h i'; }
上面代码先划分出9个单元格，然后将其定名为a到i的九个区域，分别对应这九个单元格。
实战范例见 grid-template-areas与土地区域划分 » CSS新世界demo演示
不属于任何区域的单元格，用.表示
grid-template-areas: 'a . c' 'd . f' 'g . i';
多个单元格合并成一个区域
grid-template-areas: "header header header" "main main sidebar" "footer footer footer";
上面代码中，顶部是页眉区域header，底部是页脚区域footer，中间部分则为main和sidebar。
改变网格布局的布局顺序
grid-auto-flow
- row 【默认值】—— "先行后列"
column—— "先列后行"。 使用范例见 grid-auto-flow:column与垂直排列优先布局 » CSS新世界demo演示row dense，表示"先行后列"，并且尽可能紧密填满，尽量不出现空格。
column dense，表示"先列后行"，并且尽可能紧密填满，尽量不出现空格。
默认的grid-auto-flow: row效果是
修改设置，设为row dense后
如果将设置改为column dense，表示"先列后行"，并且尽量填满空格，则效果如下
dense
表示网格的自然排列启用“密集”打包算法，也就是说，如果稍后出现的网格比较小，则尝试看看其前面有没有合适的地方放置该网格，使网格尽可能排列紧凑。
举个通俗的例子，村里9户人家，每一户都分得了一块田地，大家的田地都是紧密相连的。孤寡老人李大爷和王大爷相继去世，于是就有两块田地是空的，因为有空缺，所以这个时候，如果我们使用无人机从田地上方拍一个照片，就会看到照片中的田地是稀疏的，不是紧密的。这个时候，村里又来了两户新人家，也要分田地。如果使用dense属性值，则优先分配之前李大爷和王大爷留下的空缺的土地，因为这样会让整片田地没有空缺，让田地是“密集的”（“紧密的”）。
范例：
设置单元格内的对齐方式
justify-items
指定单元格内容的水平对齐方式，属性值有：
- stretch：【默认值】拉伸，占满单元格的整个宽度。
- start：对齐单元格的起始边缘。
- end：对齐单元格的结束边缘。
- center：单元格内部居中。
align-items
指定单元格内容的垂直对齐方式，属性值有：
- normal：【默认值】会根据使用场景的不同表现为stretch或者start。
- stretch：拉伸，占满单元格的整个宽度。
- start：对齐单元格的起始边缘。
- end：对齐单元格的结束边缘。
- center：单元格内部居中。
- baseline：基线对齐（align-items属性特有属性值）
效果见 justify-items/align-items属性值样式表现 » CSS新世界demo演示
在绝大多数场景下normal的表现和stretch的表现是一模一样的，但是如果grid子项是具有内在尺寸或具有内在比例的元素，则此时normal的表现类似于start属性值的表现。最典型的具有内在尺寸和比例的元素就是img图片元素。
grid子项是两个替换元素，一个替换元素是图片，具有内在的尺寸和比例；另一个替换元素是按钮，没有内在尺寸和比例。结果垂直方向的对齐表现如图6-111所示，图片的表现与start的表现一样，位置居顶且没有拉伸，而按钮的表现与stretch的表现一样，在垂直方向上完全被拉伸了。
对比效果见 align-items默认值图片和按钮的样式表现 » CSS新世界demo演示
place-items
是align-items属性和justify-items属性的合并简写形式。
place-items: start end;
如果省略第二个值，则浏览器认为与第一个值相等。
IE浏览器和Edge浏览器都不支持place-items属性。如果不考虑浏览器的兼容性，在CSS中实现垂直居中对齐效果的最佳方法就是使用place-items属性：
.container { display: grid; place-items: center; }
justify-self
跟justify-items属性的用法完全一致，但只作用于单个项目。
align-self
跟align-items属性的用法完全一致，也是只作用于单个项目。
place-self
是align-self属性和justify-self属性的合并简写形式。
place-self: center center;
如果省略第二个值，place-self属性会认为这两个值相等。
.item-1 { justify-self: start; }
设置容器内的对齐方式
justify-content
是整个内容区域在容器里面的水平位置（左中右）
align-content
是整个内容区域的垂直位置（上中下）。
要想justify-content属性和align-content属性起作用，就需要让grid子项的总尺寸小于grid容器的尺寸。要么给gird子项设置较小的具体的尺寸值，要么让gird子项的尺寸是auto，同时保证内容尺寸较小。
都可以取下面这些值：
- normal【默认值】效果和stretch一样
- start - 对齐容器的起始边框。
- end - 对齐容器的结束边框。
- center - 容器内部居中。
- stretch - 项目大小没有指定时，拉伸占据整个网格容器。
- space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
- space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。
- space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
效果见 justify-content/align-content属性值样式表现 » CSS新世界demo演示
place-content
是align-content属性和justify-content属性的合并简写形式。
place-content: space-around space-evenly;
如果省略第二个值，浏览器就会假定第二个值等于第一个值。
指定项目的位置
通过指定项目的四个边框分别定位在哪根网格线，来指定项目的位置
grid-column-start属性：左边框所在的垂直网格线grid-column-end属性：右边框所在的垂直网格线grid-row-start属性：上边框所在的水平网格线grid-row-end属性：下边框所在的水平网格线
属性值可以是负整数，但是不能是0，负整数表示从右侧开始计数网格线。
.container { display: grid; grid: auto / repeat(6, 1fr); } .item { grid-column-start: -3; grid-column-end: 2; /* 设置背景色 */ background: deepskyblue; }
属性值还可以指定为网格线的名字
.item-1 { grid-column-start: header-start; grid-column-end: header-end; }
名称还有一个自动补全-start后缀和-end后缀的特性
.container { display: grid; grid-template-columns: [A-start] 100px [A-end B-start] auto [B-end] auto; } .item { grid-column-start: A; grid-column-end: B; /* 设置背景颜色 */ background: deepskyblue; }
.container { display: grid; grid-template-columns: [A] 80px [B] auto [C] 100px [D]; } .item { grid-column-start: B 4; grid-column-end: C; /* 设置背景颜色 */ background: deepskyblue; }
css【详解】grid布局—— 网格布局（栅格布局）（二）：https://developer.aliyun.com/article/1556236
