使用 display:grid 定义为网格布局称之为网格布局。
display: grid;
一个网格通常具有很多列（ column ）和行 （ row ）以及间隙（ gutter ）。
仅添加一个 display: grid 页面仅是添加了只有一列的网格，所有的子项按照正常的布局流排布。
该属性用于网格布局外层，定义网格晶格在横轴的布局方式,可使用简单的 数值、百分比来分配空间。
一个灵活的网格单位，表示剩余空间的大小。在定义后，会根据可用空间的大小进行自动分配。
grid-area 属性网格项目的尺寸以及在网格布局中的 位置，它是以下属性的简写属性:
grid-area 属性还可以用于为网格项分配名称。然后，可以通过网格容器的 grid-template-areas 属性引用命名的网格项目。
如果指定了四个 <grid-line> 值， grid-row-start 会被设置为第一个值， grid-column-start 为第二个值， grid-row-end 为第三个值， grid-column-end
为第四个值。
当 grid-column-end 被忽略时，若 grid-column-start 为一 <custom-ident> （自定义关键字数据类型）， grid-column-end 则为该 <custom-ident> 否则为 auto 。
当 grid-row-end 被忽略时，若 grid-row-start 为一 <custom-ident> ， grid-row-end 则为该 <custom-ident> ；否则为 auto 。
当 grid-column-start 被忽略时，若 grid-row-start 为一 <custom-ident> ，则所有四项普通写法的属性值均为该值。否则为 auto
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end |
itemName;
<custom-index> 如果存在一 <custom-indent>-start/<custom-indent>-end 命名的自定义基线，他会将第一个这样的基线给网格单元被命名的网格区域（ grid areas ）会自动生成隐式的被命名的基线，因此指定 grid-row: foo; 将会选择这个命名区域的开始和结束的边界（除非在它之前存在显式指定的以 foo-start/foo-end 命名的其他基线）。
否则，它就会被当作整数 1 与 <custom-ident> 一起指定。
<integer>&& <custom-ident> 将第 n 条网格基线贡献给网格单元布置。如果指定的是负数，则指的是从下边界向上边界计算的反向顺序。如果提供的是
<custom-ident>，那么只有以此命名的基线才会被计算。如果所命名的基线数超过了网格线数，为了找到该位置，所有隐式的网格线会被假定拥有这个命名。 integer 值不能为 0。span && [<integer> | <custom-ident>] 为网格单元定义一个跨度，使得网格单元的网格区域中的一条边界远离另一条边界线 n 条基线。如果提供的是
<custom-ident>，则只有以此命名的基线才会被计算。如果网格线不足，则假定与搜索方向对应的显式网格一侧的所有隐式网格线都具有该名称。如果忽略 <integer> ，它就默认设为
1。它的值也不能为 0。grid-area 可以用以限定位置，也可以提供一个项目分配名称，供 grid-template-areas 使用。
每一行由 " ' ' " 来定义，每行中的列项在撇号内定义，并以空格分割，"." 表示未命名的网格项目。
p {
grid-area: p;
}
div {
display: grid;
grid-template-areas: ' p p p ...' 'p p ....';
}
例：定义大方局
.item1 {
grid-area: header;
}
.item2 {
grid-area: menu;
}
.item3 {
grid-area: main;
}
.item4 {
grid-area: right;
}
.item5 {
grid-area: footer;
}
.grid-container {
grid-template-areas:
'header header header header header header'
'menu main main main right right' 'menu footer footer footer
footer footer';
}
为网格布局内的每一个项目都使用 grid-area 限定位置，即更改了出场顺序。
grid-auto-columns 属性设置网格容器中列的尺寸：
grid-auto-columns: auto | max-content | min-content | length;
grid-auto-flow 属性控制自动放置的项目如何插入网络中：
grid-auto-flow: row | column | dense | row dense | column dense;
grid-auto-rows 属性设置为网络中的行设置尺寸，该属性只会影响俄日设置尺寸的行：
grid-auto-rows: auto | max-content | min-content | length;
grid-template-columns 属性规定网格布局中二点列数（和宽度）：
grid-template-columns: none | auto | max-content | min-content | length | initial | inherit;
防止设置的数据超出限制后的函数，第一参数为向设置的最小数，当超出后则按第二参数进行分配
grid-template-rows:
none | auto | max-content | min-content | length | initial |
inherit;
可以使用 justify-content 来调节容器内对齐整个网鸽。其取值在《弹性盒》
同样，可使用 align-content 来调节整个网格内部的垂直排列方式。其取值见《弹性盒》
grid-column 属性规定设置网格项目中的尺寸以及在网络布局中的位置，它是以下属性的简写属性：
grid-column: grid-column-start / grid-column-end;
例如，从第 1 列（包括）到第 5 列（不包括）：
grid-column: 1/ 5;
例如，从第 1 列开始，跨越 4 列：
grid-column: 1 / span 4;
grid-row 规定网格布局的尺寸以及在网格布局中的位置，它是以下属性的简写：
grid-row: grid-row-start / grid-row-end;
用法类似上述 grid-column 。
grid-template 属性是以下属性的简写属性：
grid-template:
none | grid-template-rows /
grid-template-columns | grid-template-areas | initial | inherit;
grid-template-areas 属性在网格布局中规定区域：
grid-template-areas: none | itemNames;
grid 属性是以下属性的简写属性：
grid:
none |
// 默认值，不定义行或列的尺寸
grid-template-rows
/ grid-template-columns |
// 规定列和行的尺寸
grid-template-areas |
// 规定使用命名项目的网格布局
grid-template-rows / [grid-auto-flow]
grid-auto-columns | // 规定行的尺寸（高度），以及列的自动尺寸
[grid-auto-flow] grid-auto-rows / grid-template-columns |
// 规定行的自动尺寸，并设置 grid-template-columns 属性
grid-template-rows |
grid-auto-flow grid-auto-columns |
// 规定行的尺寸（高度），以及如何设置自动就位的项目，和列的自动尺寸 grid-auto-flow grid-auto-rows/grid-template-columns |
// 规定如何放置自动就位的项目，和行的自动尺寸，以及设置 grid-template-columns 属性
initial |
inherit;
网格列
grid Columns 网格线中的垂直线
grid rows 网格项中水平线
列之间的线称为列线（ column lines ），行之间的线被称为行线（ row lines ）。
当把网格项目放进网格容器时，需使用引号。
.a {
grid-column-start: 1;
grid-column-end: 3;
}