grid

在一个声明中设置所有以下属性的简写： grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 和 grid-auto-flow 。它还将grid-column-gap 和 grid-column-gap设置为初始值，即使它们不可以通过grid属性显式地设置。

• none：将所有子属性设置为其初始值
• <grid-template-rows> / <grid-template-columns>：将 grid-template-rows 和 grid-template-columns 分别设置为指定值，将所有其他子属性设置为其初始值
• <grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ] ：分别接受所有与 grid-auto-flow ，grid-auto-rows 和 grid-auto-columns 相同的值。如果省略了 grid-auto-columns ，它被设置为由 grid-auto-rows 指定的值。如果两者都被省略，他们就会被设置为初始值

.container {
    grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]];
}

例子：

以下两个代码块是等效的：

.container {
  grid: 200px auto / 1fr auto 1fr;
}

.container {
  grid-template-rows: 200px auto;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: none;
}

以下两个代码块也是等效的：

.container {
  grid: column 1fr / auto;
}

.container {
  grid-auto-flow: column;
  grid-auto-rows: 1fr;
  grid-auto-columns: auto;
}

它也接受一个更复杂但相当方便的语法来一次设置所有内容。您可以 grid-template-areas，grid-template-rows和grid-template-columns，并所有其他的子属性都被设置为它们的初始值。这么做可以在它们网格区域内相应地指定网格线名字和网格轨道的大小。用最简单的例子来描述：

.container {
  grid: [row1-start] "header header header" 1fr [row1-end]
        [row2-start] "footer footer footer" 25px [row2-end]
        / auto 50px auto;
}

等价于：

.container {
  grid-template-areas: 
    "header header header"
    "footer footer footer";
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;    
}