使用 CSS“网格”速记属性节省时间

在过去的教程中，我们学习了如何设置网格、定义其显式属性（如grid-template-columns和grid-template-areas）甚至其一些隐式属性（如grid-auto-columns）。在本教程中，我们将研究grid在一个语句中快速处理上述所有内容的速记属性。

使用 CSS“网格”速记属性节省时间第1张

您的网格，两条简单的线

像往常一样，首先display: grid;在您的容器上声明。接下来，使用该grid属性来布置行，然后是列：

.grid-1 {
display: grid;
grid: 100px auto 300px / repeat(2, 1fr) 100px;
}

上面的语句说我们想要三个显式的 100px、auto 和 300px 行。并且（使用repeat()函数）两列 1fr，然后是 100px 之一。它与这个更长的版本完全相同：

.grid-1 {
    display: grid;
    grid-template-rows: 100px auto 300px;
    grid-template-columns: repeat(2, 1fr) 100px;
}

这两个陈述都给了我们这个：

See the Pen CSS Grid Layout: Grid Shorthand Property by Envato Tuts+ (@tutsplus) on CodePen.

将隐含值添加到组合中

隐式值是我们要求 Grid 在我们定义的显式值之外使用的值。简而言之grid，我们不能将两者结合起来，所以我们必须做出选择。看看这个，例如：

.grid-1 {
display: grid;
grid: auto-flow 100px / 1fr 100px;
}

在这种情况下，我们坚持使用显式列（一个是 1fr，另一个是 100px），但是我们的行使用了grid-auto-flowand的缩写形式grid-auto-rows。它说“当您需要向网格添加更多轨道时，将它们添加为行。并让每个 100 像素高。” 与此相同：

.grid-1 {
  display: grid;
  grid-template-columns: 1fr 100px;
  grid-auto-flow: row;
  grid-auto-rows: 100px;
}

这是相当默认的行为，但如果我们改为让隐式网格使用额外的列，我们会看到更大的变化：

.grid-1 {
display: grid;
grid: 100px 300px / auto-flow 100px;
}

这给了我们两行 100px 和 300px，然后有效地设置 grid-auto-flow: column;. 它与以下内容相同：

.grid-1 {
  display: grid;
  grid-template-rows: 100px 300px;
  grid-auto-flow: column;
  grid-auto-columns: 100px;
}

现在，自动放置算法从上到下放置项目，当空间不足时将列添加到右侧：

See the Pen CSS Grid Layout: Grid Shorthand Property (Implicit columns) by Envato Tuts+ (@tutsplus) on CodePen.

注意：我们不能 auto-flow同时在行和列上声明，这是行不通的。

包装关键词

如果您回想我们的教程了解 css 网格“自动放置算法”，您会记得我们讨论过sparse的dense; 描述项目打包到网格中的方式的关键字。这些也可以与一起使用 auto-flow，如下所示：

.grid-1 {
display: grid;
grid: 100px 300px / auto-flow dense 100px;
}

网格模板区域

模板区域是一种命名我们网格区域的方式，几乎是一种视觉上的代表方式。以最简单的形式，我们将仅用于grid描述我们的模板区域，仅此而已：

.grid-1 {
    display: grid;
    grid:   "header   header   header"
            "main     main     sidebar"
            "footer   footer   footer";
}

然后我们会说明每个网格项填充哪个区域，如下所示：

.item-1 {
grid-area: header;
}

如果您还记得我们最初的模板区域教程，我们有更多详细信息可以为我们提供列和行维度：

.grid-1 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 80px 180px 80px;
    grid-template-areas:    "header   header   header"
                            "main     main     sidebar"
                            "footer   footer   footer";
}

我们也可以这样做，如下所示：

.grid-1 {
    display: grid;
    grid:   "header   header   header" 80px
            "main     main     sidebar" 180px
            "footer   footer   footer" 80px
            / 1fr 1fr 1fr;
}

我们在正斜杠之后添加列宽（repeat()在这种情况下该函数不起作用，但我不知道为什么）。我们在区域声明之后添加行高。这就是我们最终的结果：

See the Pen CSS Grid Layout: Grid Shorthand Property (Grid Template Areas) by Envato Tuts+ (@tutsplus) on CodePen.