Grid 网格布局

例子：

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
    <title>Document</title>
8
    <link rel="stylesheet" href="./index.css" />
9
  </head>
10

11
  <body>
12
    <div class="grid">
13
      <div class="item hd">header</div>
14
      <div class="item sd">sider</div>
15
      <div class="item bd">body</div>
4 collapsed lines
16
      <div class="item ft">footer</div>
17
    </div>
18
  </body>
19
</html>

1
.item {
2
  background: orange;
3
  padding: 20px;
4
}
5

6
.hd {
7
  grid-area: hd;
8
}
9
.sd {
10
  grid-area: sd;
11
}
12
.bd {
13
  grid-area: bd;
14
}
15
.ft {
12 collapsed lines
16
  grid-area: ft;
17
}
18

19
.grid {
20
  display: grid;
21
  grid:
22
    "hd hd hd" minmax(200px, auto)
23
    "sd bd bd" minmax(60vh, auto)
24
    "sd . ft" minmax(200px, auto)
25
    / 1fr 1fr 1fr;
26
  grid-gap: 10px 20px;
27
}

属性
1. grid（网格容器布局）
  1. grid-template
    1. grid-template-columns（网格容器轨道列，可使用弹性单位 fr）和 grid-template-rows（网格容器轨道行）
      1. 1fr 1fr 1fr
      2. 500px 1fr 2fr
      3. repeat(3, 1fr)
      4. repeat(5, 1fr 2fr)
      5. 20px repeat(6, 1fr) 20px
      6. repeat(auto-fill, 200px)
      7. repeat(auto-fill, minmax(200px, 1fr))
      8. [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end]
      9. repeat(12, [col-start] 1fr)
    2. grid-template-areas（网格区域布局，多个网格单元 grid-area 组成）
  2. grid-auto-columns / grid-auto-rows（轨道大小）
    1. minmax(100px, auto)
    2. 100px 200px
  3. grid-auto-flow
2. grid-gap（网格空器子项的间距）
  1. 缩写 1em 10px
3. grid-column / grid-row / grid-area
  1. grid-column-start 和 grid-column-end（网格单元线定位，命名线和线序号可混合使用）
    1. 1 ( / 2)
    2. 1 / 2
    3. 1 / span 3
    4. span 3 / 4
    5. 1 / -1
    6. main-start / 2
    7. 1 / main-end
    8. col-start / col-start 5
  2. grid-area（网格单元区域定位）
    1. 上右下左：1 / 1 / 4 / 2
    2. 自定义命名如：hd ft bd
网格：显示和隐式，显示是用 grid-template-columns 和 grid-template-rows 创建的行和列；隐式就是在网格定义之外又放了一些东西，让网格按所需的内容创建行，这些行会被创建在隐式网格中。
网格线：当我们定义网格时，我们定义的是网格轨道，而不是网格线，但会创建网格线编号来定位每一个网格元素。如果把一个网格区域周围的线都用 -start 和 -end 作为后缀，网格容器就会为网格区域创建一个名字，如 content-start 和 content-end 创建一个 content，反之亦然。
1. 1 2 3
2. -3 -2 -1
网格单元（最小单位）、网格区域（多个网格单元合并的矩形）、嵌套网格（display contents）、网格容器
轨道：一个网格轨道就是网格中任意两条线之间的空间。
轨道可弹性：固定宽度和新单位 fr
定位可命名：使用行号、行名或区域名
内容可对齐（盒模型）：网格容器 align-items、justify-content，网格单元的 align-self
层级可控制：z-index
网格容器或网格区域可设置 relative，网格单元或网格单元内元素绝对定位
与 Flexbox 的区别：Flex 是一维（只控制行或列），Grid 是二维（同时控制行和列）
自动定位？还没完全理解
常见布局有哪些？1-3 列灵活布局、12 列灵活布局