CSS进阶：Grid布局

flex布局本质上是令所有子元素排列在一条轴线上，尽管在子元素较多时可以回行显示，但逻辑上仍是同一行。—— 一维

grid布局的思路是对早年间table布局的升华，即把网页看成有若干行和列的网格，然后让各元素分别与网络线对齐。—— 二维

flex布局和grid布局不是互相替代的关系，而是互相合作的关系，在一个复杂的页面中，通常用grid做全局化粗粒度的布局，然后再用flex布局对每个网格进行细粒度的布局。

注意：float，display: inline-block，display: table-cell，vertical-align 和 column-* 属性对网格项无效。

父元素网格容器(Grid Container) 属性

若要使用grid布局，需先在父元素上声明display: grid;，这样它的所有直系子元素就会成为grid元素。inline-grid ：生成一个内联网格

grid-template-columns用于规定每一行要分成几列，以及每列的尺寸，repeat(4, 1fr)表示把一行平均分成4份，1fr是一个长度单位，表示平分之后的1份的宽度。

网格线默认网格线会自动分配正数和负数名称。也可以明确的指定网格线(Grid Line)名称

grid-template-columns: [first] 40px [line2] 50px [line3] …

grid-template-areas给网格区域重命名，重复网格区域的名称导致内容跨越这些单元格，即名字相同的属于同一区域。一个点号（.）代表一个空单元格

注意每一行都需要有相同数量的单元格。

…
.item-d {
  grid-area: footer;
}
 
.container {
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

当你使用这种语法时，区域两端的网格线实际上会自动命名。如果你的网格区域的名字是 foo，该区域的起始行网格线和起始列网格线的名称将为 foo-start，而最后一条行网格线和最后一条列网格线的名称将为 foo-end。这意味着某些网格线可能有多个名字

column-gap 和 row-gap指定网格线(grid lines)的大小，设置列/行之间间距的宽度。

justify-items: start | end | center | stretch;items在区域内的对齐方式，align-items同理

grid-auto-columns / grid-auto-rows 自动放置算法，设置多出来的项目的宽高

grid-auto-flow: row | column | row dense | column dense

row：告诉自动布局算法依次填充每行，根据需要添加新行（默认）
column：告诉自动布局算法依次填入每列，根据需要添加新列
dense：告诉自动布局算法在稍后出现较小的网格项时，尝试填充网格中较早的空缺

子元素网格项(Grid Items) 属性

使用 grid-column 和 grid-row 来定位网格项

.item-a {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

grid-area 名称引用

justify-self 设置单个item样式

父元素 网格容器(Grid Container) 属性

子元素 网格项(Grid Items) 属性

父元素网格容器(Grid Container) 属性

子元素网格项(Grid Items) 属性