1.grid 布局
grid是 css 中的一種新的布局方式，對盒子和盒子內容的位置及尺寸有很強的控制能力。與 flex 不同，flex 著重于單軸，而 grid 適應于多軸。
2. 基本概念
設置 display: grid; 的元素稱為容器，它的直接子元素稱為項目，但注意子孫元素不是項目。
grid line：網格線，構成 grid 布局的結構，分為水平和豎直兩種。
grid track：兩條相鄰網格線之間的空間，可以認為是一行或者一列。
grid cell：兩條相鄰行和相鄰列之間分割線組成的空間，是 grid 布局中的一個單元。
grid area：四條網格線包裹的全部空間，任意數量的 grid cell 組成一個 grid area。
3. 容器屬性
grid-template 系列
grid-template-columns
grid-template-rows
grid-template-areas
grid-gap 系列
grid-column-gap
grid-row-gap
place-items 系列
justify-items
align-items
place-content 系列
justify-content
align-content
grid 系列
grid-auto-columns
grid-auto-rows
grid-auto-flow