CSS 布局：Grid

网格容器

CSS
 1/* 定义显式网格航向（Grid Track） */
 2grid-templates
 3grid-template-rows
 4grid-template-columns
 5grid-template-areas
 6
 7/* 定义网格 Gutter */
 8grid-gap
 9grid-row-gap
10grid-column-gap
11
12/* 定义网格项（Grid Item）的对齐方向 */
13justify-items
14align-items
15
16/* 定义网格航向的对齐方向 */
17justify-content
18align-content
19
20/* 定义隐式网格航向 */
21grid-auto-rows
22grid-auto-columns
23grid-auto-flow

网格单位

数值：

fr，类比 Flexbox 的 flex-grow
- 延伸剩余的所有可用空间
  - grid-template-columnsn: repeat(2, 150px) 1fr
- 按比例划分可用空间
  - grid-template-columnsn: 1fr 1fr 2fr
  - grid-template-columnsn: 50% 1fr 2fr

关键字：

max-content，最大内容尺寸
- grid-template-columns: max-content 1fr 1fr max-content
min-content，最小内容尺寸
- grid-template-rows: repeat(2, min-content);
- grid-template-columns: min-content 1fr 1fr min-content
auto-fill，对所有可用空间进行划分网格航向
- grid-template-columns: repeat(auto-fill, 100px);
auto-fit，按需划分网格航向
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

函数：

repeat(num, unit)，定义重复值
- grid-template-rows: repeat(3, 150px)
- grid-template-rows: repeat(2, 150px) 300px
minmax(v1, v2)，代表取值最小要 v1，最大不能超过 v2，其中 v2 值可以比 v1 小
- grid-template-rows: repeat(2, minmax(150px, min-content));

显式与隐式网格

CSS
 1/* 定义隐式网格航向是行或列 */
 2grid-auto-flow: row | column;
 3
 4/* 定义显式网格航向尺寸 */
 5grid-template-rows: repeat(2, 150px);
 6grid-template-columns: repeat(2, 1fr);
 7
 8/* 定义隐式网格航向尺寸 */
 9grid-auto-rows: 80px;
10grid-auto-columns: .5fr;

网格项

CSS
 1/* 定义网格区 */
 2grid-area
 3grid-row
 4grid-column
 5
 6/* 定义网格行 */
 7grid-row
 8grid-row-start
 9grid-row-end
10
11/* 定义网格列 */
12grid-column
13grid-column-start
14grid-coumn-end
15
16/* 定义网格项对齐方式 */
17justify-self
18align-self
19
20/* 定义网格项排序 */
21order

定位与跨越

CSS
 1/* 将网格项放于指定位置 */
 2grid-row-start: 1;
 3grid-row-end: 2;
 4grid-column-start: 3;
 5grid-column-end: 4;
 6
 7/* 将网格项放于指定位置（简写）*/
 8grid-row: 1 / 2;
 9grid-column: 3 / 4;
10
11/* 将网格项放于指定位置（简写）*/
12grid-area: 1 / 3 / 2 / 4;
13
14/* 跨越多个网格单元 */
15grid-column: 1 / 3;
16grid-column: 1 / span 2;
17grid-column: 1 / -1;

当跨越已被显式定位的网格项时，则该跨越项会被换行
当同时指定定位和跨越时，则一个网格单元可被多个网格项填充，其中 z-index 用于控制哪个显示在前

命名网格线

CSS
1grid-template-rows: [header-start] 100px [header-end main-start] 100px [main-end];
2
3gird-template-columns: repeat(2, [col-start] 1fr [col-end]) 100px [grid-end];
4
5grid-row: main-start / main-end;
6
7grid-column: col-start 2 / grid-end;

命名网格区

未命名的网格：

CSS
 1.container {
 2  width: 1000px;
 3  margin: 30px auto;
 4
 5  display: grid;
 6  grid-template-rows: 100px 200px 400px 100px;
 7  grid-template-columns: 200px repeat(3, 1fr);
 8  grid-gap: 30px;
 9}
10
11.container > div {
12  background: crimson;
13  color: #fff;
14  font-size: 30px;
15}
16
17.header {
18  grid-column: 1 / -1;
19}
20
21.sidebar {
22  grid-row: 2 / span 2;
23}
24
25.main-content {
26  grid-column: 2 / -1;
27}
28
29.footer {
30  grid-column: 1 / -1;
31}

命名网格线：

CSS
 1.container {
 2  width: 1000px;
 3  margin: 30px auto;
 4
 5  display: grid;
 6  grid-template-rows: [header-start] 100px [header-end box-start] 200px [box-end main-start] 400px [main-end footer-start] 100px [footer-end];
 7  grid-template-columns: [side-start] 200px [side-end] repeat(3, [col-start] 1fr [col-end]);
 8  grid-gap: 30px;
 9}
10
11.container > div {
12  background: crimson;
13  color: #fff;
14  font-size: 30px;
15}
16
17.header {
18  grid-column: side-start / -1;
19}
20
21.sidebar {
22  grid-row: box-start / main-end;
23}
24
25.main-content {
26  grid-column: col-start 1 / -1;
27}
28
29.footer {
30  grid-column: side-start / -1;
31}

命名网格区：

CSS
 1.container {
 2  width: 1000px;
 3  margin: 30px auto;
 4
 5  display: grid;
 6  grid-template-rows: 100px 200px 400px 100px;
 7  grid-template-columns: 200px repeat(3, 1fr);
 8  grid-gap: 30px;
 9  grid-template-areas: "head head head head"
10                       "side box box box"
11                       "side main main main"
12                       "foot foot foot foot";
13}
14
15.container > div {
16  background: crimson;
17  color: #fff;
18  font-size: 30px;
19}
20
21.header {
22  grid-area: head;
23}
24
25.sidebar {
26  grid-area: side;
27}
28
29.main-content {
30  grid-area: main;
31}
32
33.footer {
34  grid-area: foot;
35}

命名网格区（留空）：

CSS
 1.container {
 2  width: 1000px;
 3  margin: 30px auto;
 4
 5  display: grid;
 6  grid-template-rows: 100px 200px 400px 100px;
 7  grid-template-columns: 200px repeat(3, 1fr);
 8  grid-gap: 30px;
 9  grid-template-areas: ". head head head"
10                       "side box-1 box-2 box-3"
11                       "side main main main"
12                       "foot foot foot foot";
13}
14
15.container > div {
16  background: crimson;
17  color: #fff;
18  font-size: 30px;
19}
20
21.header {
22  grid-area: head;
23}
24
25.sidebar {
26  grid-area: side;
27}
28
29.box-1 {
30  grid-area: box-1;
31}
32
33.box-2 {
34  grid-area: box-2;
35}
36
37.box-3 {
38  grid-area: box-3;
39}
40
41.main-content {
42  grid-area: main;
43}
44
45.footer {
46  grid-area: foot;
47}

HTML 源码：

HTML
 1<!DOCTYPE html>
 2<html>
<head>
  <meta charset="UTF-8">
  <title>Grid</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="box-1">Box-1</div>
    <div class="box-2">Box-2</div>
    <div class="box-3">Box-3</div>
    <div class="main-content">Main Content</div>
    <div class="footer">Footer</div>
  </div>
</body>
19</html>

对齐网格项

网格项相对于网格单元或网格区的对齐。

CSS
 1/* 在网格容器中整体定义 */
 2/* 水平方向 */
 3justify-items: stretch | center | end | start;
 4/* 垂直方向 */
 5align-items: stretch | center | end | start;
 6
 7/* 在网格项单独定义 */
 8/* override 网格容器的 `justify-items` */
 9justify-self: stretch | center | end | start;
10/* override 网格容器的 `align-items` */
11align-self: stretch | center | end | start;

对齐网格航向

网格航向相对于网格容器的对齐。

CSS
1/* 在网格容器中定义 */
2/* 水平方向 */
3justify-content: center | end | start | space-between | space-around | space-evenly;
4/* 垂直方向 */
5align-content: center | end | start | space-between | space-around | space-evenly;

默认策略：网格会遵循 HTML 源码中编写的顺序，当剩余网格区不足以放下网格项时，会自动留空并创建新的网格航向。

而使用 dense 关键字（grid-auto-flow: row dense），则可以忽略网格项在源码中的顺序，使网格保持密集，尽量不留空。