是时候学习Grid布局了

一、序言

先说什么？当然先说大家最关心的兼容性了
CanIUse

嗯，对于非要兼容IE的开发者，我建议，量力而行！兼容性还是不如Flex
当然，如果你flex够熟悉了，但却被一些布局有时候难倒，我建议还是学习一下Grid，会让你柳暗花明，眼前一亮的

二、基础使用

1）grid-template-columns和grid-template-rows属性来定义网格的列和行
grid-template-rows / grid-template-columns 接收的值有 auto、fr、px 和 %。
fr类似flex的flex:1

.container {
  display: grid;
  grid-template-columns: 100px 200px 100px; /* 定义三列，宽度分别为100px, 200px和100px */
  grid-template-rows: 50px 100px; /* 定义两行，行高分别为50px和100px */
  /* 其他值举例 */
  grid-template-columns: [linename1] 100px [linename2 linename3]; // 一条网格线多个名字
  grid-template-columns: minmax(100px, 1fr);  // 最小100px, 最大满屏
  grid-template-columns: fit-content(40%);    // 指定最大值不超过屏宽40%
}

2）grid-column 和 grid-row 属性来控制网格项目的位置和大小。

.item1 {
  grid-column: 1 / 3; /* 从第1列开始，跨越到第3列 */
  grid-row: 1 / 2; /* 从第1行开始，跨越到第2行 */
}

3）网格线命名

.container {
  display: grid;
  grid-template-columns: [start] 100px [middle] 200px [end] 100px;
  grid-template-rows: [header] 50px [main] 100px;
}

 .item1 {
  grid-column: start / middle; /* 从名为 'start' 的线到 'middle' 的线 */
  grid-row: header / main; /* 从名为 'header' 的线到 'main' 的线 */
}

4）自动布局

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 创建3个等宽的列 */
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* 自动填充列，最小宽度100px，最大宽度1fr */
}

5）grid-template-areas定义网格区域

grid-template-areas:    "header header header"
                                    "navigation main ads"
                                    "footer footer footer";

6） row-gap和column-gap定义间距，可简写gap

row-gap: 20px; /* 设置行间距为20px */
  column-gap: 30px; /* 设置列间距为30px */

7）justify-items: start | end | center | stretch(默认)，定义网格子项的内容水平方向上的对齐方式

8）align-items: start | end | center | stretch(默认)，定义网格子项的内容垂直方向上的对齐方式

9）place-self里面包含了有 justify-self、align-self 两个属性

10）grid-auto-flow 属性定义自动布局算法，可选为row，column，dense(稠密堆积算法);

11）grid-auto-rows 定义隐式创建的行高度

三、技巧：

1.使某些元素占满视口

grid-column: 1 / -1;