CSS的Grid布局可以灵活控制行和列，适合页面整体布局、后台管理系统、卡片列表、瀑布式区域布局。 涉及属性如下：
Grid
│
├── 容器(定义在外层父级元素上)
│ ├── display
│ ├── grid-template-columns
│ ├── grid-template-rows
│ ├── grid-template-areas
│ ├── grid-template
│ ├── grid-auto-columns
│ ├── grid-auto-rows
│ ├── grid-auto-flow
│ ├── grid
│ ├── column-gap
│ ├── row-gap
│ ├── gap
│ ├── justify-items
│ ├── align-items
│ ├── place-items
│ ├── justify-content
│ ├── align-content
│ └── place-content
│
└── Grid Item(定义在一级子元素上)
├── grid-column-start
├── grid-column-end
├── grid-row-start
├── grid-row-end
├── grid-column
├── grid-row
├── grid-area
├── justify-self
├── align-self
└── place-self
使用Grid布局，首先要在容器上定义display:grid;如下：
.container {
display: grid;
}
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>7</div>
<div>8</div>
</div>
此时容器内元素布局没有特殊变化，grid和 inline-grid样式 类似于block和inline-block; grid代表容器本身为块级元素 以列布局，inline-grid代表容器本身为行内块级元素 以行布局；
grid-template-columns
定义列轨道
.container {
display: grid;
grid-template-columns: 200px 300px 200px;
}
结果：
200px | 300px │ 200px
├────────┼────────────┼────────┤
│ 1 │ 2 │ 3 │
|────────|────────────|────────|
│ 4 │ 5 │ 6 │
|────────|────────────|────────|
│ 7 │ 8 │ │
└────────┴────────────┴────────┘
属性值可以是多个值，几个值就是几列。单位可以是px,fr,百分数。
1.fr
该单位表示剩余空间按比例分配。
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
//布局分成三列，
//剩余空间一共分4份（这里没有其他单位定义，剩余空间就是整个容器）
//第一列占1份，第二列占2份，第三列占1分
结果：
1fr | 2fr │ 1fr
├───────┼──────────────┼───────┤
│ 1 │ 2 │ 3 │
|───────|──────────────|───────|
│ 4 │ 5 │ 6 │
|───────|──────────────|───────|
│ 7 │ 8 │ │
└───────┴──────────────┴───────┘
2.百分比
grid-template-columns: 30% 30% 30%;
结果：
30% | 30% │ 30%
├───────┼───────┼───────┤
│ 1 │ 2 │ 3 │
|───────|───────|───────|
│ 4 │ 5 | 6 │
|───────|───────|───────|
│ 7 │ 8 │ │
└───────┴───────┴───────┘
3.repeat() 简便写法
grid-template-columns: repeat(3, 1fr);
//等价于grid-template-columns: 1fr 1fr 1fr;
//第二个参数也可以使用 px,百分号 单位;
grid-template-rows
定义行轨道。
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px 100px;
}
结果：
1fr | 2fr │ 1fr
├───────┼──────────────┼───────┤
│ 1 │ 2 │ 3 │ 100px
|───────|──────────────|───────|
| | | |
| 4 | 5 | 6 | 200px
│ │ │ │
|───────|──────────────|───────|
│ 7 │ 8 │ │ 100px
└───────┴──────────────┴───────┘
单位也可以使用fr和百分比，可以不同单位混用，也可以使用repeat()。当实际的行数小于定义的行数时，会多出空白占位。 当实际的行数大于定义的行数时，多出的行会按照默认高度显示。
grid-template-areas
在代码里用名字定义布局区域
.container {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 80px 1fr 60px;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
<div class="container">
<div class="header">header</div>
<div class="sidebar">sidebar</div>
<div class="main">main</div>
<div class="footer">footer</div>
</div>
结果：
┌─────────────────────────┐
│ header │
├──────────┬──────────────┤
│ │ │
│ sidebar │ main │
│ │ │
├──────────┴──────────────┤
│ footer │
└─────────────────────────┘
解释： 先使用grid-template-columns，grid-template-rows定义网格，是几行几列，并定义其大小，然后用字符串模板，给每一个格子起一个名字进行标记，最后用实际元素去进行占位。 注意：子元素中grid-area 的名字要和 grid-template-areas 里的名字拼写完全相同（区分大小写）。连续区域必须矩形：同名区域在网格中只能组成矩形（不能是 L 形或凹形）。
grid-template
是grid-template-columns，grid-template-rows，grid-template-areas组合的简写 例如：
.container {
grid-template:
"header header" 80px
"sidebar main" 1fr
"footer footer" 60px
/ 200px 1fr;
}
相当于：
grid-template-rows:
80px
1fr
60px;
grid-template-columns:
200px
1fr;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
“/” 前面定义行，后面定义列。
gap
表示 网格之间的间距； 例如：
.container {
display: grid;
gap: 20px;
//也可以具体定义：
//row-gap: 20px;
//column-gap: 30px;
}
grid-auto-columns
控制超出定义的列行的大小，通常与 grid-auto-flow: column 一起使用。 例如：
display: grid;
grid-template-columns: repeat(4, 100px);
grid-auto-flow: column;
grid-auto-columns: 200px;
结果：
┌─────┬─────┬─────┬─────┬─────────┬─────────┬─────────┬─────────┐
│ 1 │ 2 │ 3 │ 4 │ 5 │ 6 │ 7 │ 8 │
└─────┴─────┴─────┴─────┴─────────┴─────────┴─────────┴─────────┘
grid-auto-rows
同grid-auto-columns 一样 ，只是控制行的大小。
grid-auto-flow
控制 Grid 自动放置项目的方向
grid-column
用于网格中的具体元素，控制项目占据哪些列。
.item {
grid-column: 1 / 3;
}
等价于：
.item {
grid-column-start: 1;
grid-column-end: 3;
}
表示从列方向的 第 1 条 Grid Line到第 3 条 Grid Line。
grid-row
和 grid-column 完全类似。控制行。
span
.item {
grid-column: span 2;
}
表示当前元素从当前位置开始，占据 2 列。
grid-area
用于网格中的元素，除了上面字符串模板 还有另外一个用途：利用网格线时设置行列位置 例如：
.item {
grid-area: 1 / 2 / 3 / 4;
}
相当于：
grid-row-start: 1;
grid-column-start: 2;
grid-row-end: 3;
grid-column-end: 4;
justify-items
控制 Grid 项目在单元格中的水平方向对齐。
.container {
justify-items: start; //可选值：start end center stretch
}
align-items
控制 Grid 项目在单元格中的垂直方向对齐
place-items
align-items + justify-items 的简写
place-items: center;
相当于：
align-items: center;
justify-items: center;
-------------------------------
place-items: center start;
相当于：
align-items: center;
justify-items: start;
justify-content
不是控制网格中元素的位置，而是 控制整个 Grid 在 Grid Container 内的水平方向位置
align-content
跟justify-content对应，控制整个 Grid 在容器中的垂直位置。
place-content
是ustify-content和align-content的简写。
justify-self
控制某一个 Grid Item 的水平位置。其他元素不受影响。
align-self
与justify-self对应。控制某一个 Grid Item 的垂直位置。
place-self
justify-self和align-self简写。
minmax()
重要方法
grid-template-columns:
minmax(200px, 1fr)
minmax(200px, 2fr);
含义：最小不能小于 200px，最大可以按照 fr 分配。非常适合响应式布局。
auto-fill
grid-template-columns:
repeat(auto-fill, minmax(200px, 1fr));
含义：容器能放多少列，就自动放多少列。
auto-fit
和auto-fill十分相近，都是尽可能创建轨道。auto-fit同时折叠空轨道让现有项目扩展。
auto
很常见的尺寸
grid-template-columns:
200px
auto
200px;
含义：中间列根据可用空间以及内容进行分配。
fit-content()
grid-template-columns:
200px
fit-content(400px)
200px;
含义：根据内容伸展，但不要超过指定最大尺寸。
命名 Grid Line
grid-template-columns:
[sidebar-start] 200px
[sidebar-end content-start] 1fr
[content-end];
于是可以：
.main {
grid-column:
content-start /
content-end;
}
这对于大型布局系统非常有价值。
grid和flex 如何选择
如果只需要控制一个方向，用 Flex；如果需要同时控制行和列，用 Grid。 Flexbox 是内容优先——先有内容，再决定怎么排；Grid 是布局优先——先画格子，再往里放内容。