css grid_使用CSS“ grid”速记属性节省时间

css grid

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

用两条简单的线显示您的网格

与往常一样，首先声明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;
}

这两个语句都给我们这个：

将隐含值添加到​​混合中

隐式值是我们要求Grid在定义的显式值之外使用的值。 在grid速记中，我们无法将两者结合在一起，因此我们必须做出选择。 看一下这个，例如：

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

在这种情况下，我们使用显式列（1fr中的一个，另一个100px），但是我们的行使用grid-auto-flow和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;
}

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

注意 ：我们不能在行和列上都声明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()函数将不起作用，但我不知道为什么）。 并且我们在区域声明之后内联添加行高。 这就是我们最终得到的结果：

结论

本教程应该使您了解了grid速记属性的工作方式。 试一试，看看您可以在CSS Grid模块中使用哪些其他方面，并让我们知道它为您节省了多少时间！

翻译自: https://webdesign.tutsplus.com/tutorials/save-time-with-the-css-grid-shorthand-property--cms-31590

css grid