Grid布局

网格属性

• grid-template-rows 、grid-template-columns 和 grid-template-areas 定义显式网格；
• grid-template-rows 和 grid-template-columns 可以用来指定显式网格轨道固定数量和网格轨道尺寸；
• grid-auto-rows 、grid-auto-columns 和 grid-auto-flow 定义隐式网格；
• grid-auto-rows 和 grid-auto-columns 可以用来指定隐式网格轨道尺寸；
• grid-row 、grid-column 和 grid-area 将网格项目放置在显式网格之外，也会创建隐式网格。

网格间距（沟槽）

网格布局中，相邻两网格轨道之间有时候会有一定的间距，那么这个间距称之为 网格间距 ，也称为 沟槽

使用 gap 属性来设置网格轨道之间的间距，其中：

• column-gap 用来设置列网格轨道之间的间距；
• row-gap 用来设置行网格轨道之间的间距。

使用 grid-template-areas 定义网格

grid-template-areas 属性给网格区域命名的六条规则：

• 规则① ：必须描述一个完整的网格，即网格上的每一个单元格都必须被填充；

• 规则② ：一连串的空白，代表什么都没有，将造成 grid-template-areas 语法错误；

• 规则③ ：在网格命名中可以使用一个或多个.（U+002E），代表一个空单元格；

• 规则④ ： 多个相同单元格命名（令牌）创建一个具有相同名称的命名网格区域。简单地说，跨行或列命名相同的网格区域名称，可以达到合并单元格的作用；

• 规则⑤ ：任何其他字符的序列，会代表一个垃圾标记（Trash Token），会使声明无效；

  • 一个命名的网格区域跨越多个网格单元格时，它们必须要形成一个单一的填充矩形，否则会造成 grid-template-areas 属性失效 ，比如说一个 L 的形状。在显式给网格区域命名时，尽可能使用有语义的名称，比如前面示例中所示的header 、nav 等等。
  • 切勿使用一些数字、标点符号以及它们的组合等，比如 1 、# 、1st 等，将会被视为无效的声明。如果命名的名称是无效的，那么 grid-template-areas 属性也会被视为无效。

  /* 请不要像这样给网格区域命名 */
  .container {
      grid-template-areas:
          "1    1     a%b    a%b"
          "1st  main  main   main"
          "1st  3rd   3rd    3rd"
  }

• 规则⑥ ：当序列化 grid-template-areas 的 <string> 值是指定值或计算值时，相邻两字符串（网格区域命名）被一个空格（U+0020）隔开，当两者之间有多个空格符时，会被视为一个，其他空格将会被忽略。

.container {
    grid-template-areas:
        "header  header  menu    menu    menu    menu    menu    menu"
        "hero    hero    hero    hero    hero    hero    hero    hero"
        "main    main    main    main    main    ...     image   image"
        "main    main    main    main    main    ...     extra   extra"
        ".     brand   brand   brand   brand   brand   brand   ..."
        "footer  footer  footer  footer  footer  footer  footer  footer";
}

• 使用... 来代表空单元格，你可以根据自己的喜好，设置任意数量的点号. ，比如 .... ，它们和使用一个点（.）所起的作用是等同的。即 .、 ..、 ... 和 .... 等同，在 grid-template-areas 中代表的是一个空单元格

• 点与点之间不能有任何空格，否则将会代表多个空单元格

布局

使用 CSS 网格布局分两步：

• 使用 grid-template-* 和（或）grid-auto-* 定义一个网格，在定义所需要的网格的同时，定义了网格轨道尺寸以及网格线；
• 使用 grid-row 、grid-column 和（或）grid-area 将网格项目放置到指定的位置。