简单命名的网格区域-CSDN博客

我认为CSS网格中的命名网格区域是自带的语法糖。您并不是绝对需要它们（可以用其他方式表示网格放置），但是可以使该放置更直观。而且，嘿，如果我对此有误，请在评论中纠正我。

假设您设置了一个3列网格：

.grid {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 
     200px  1fr  1fr;
}

此处未定义任何行；这些是隐式的，将根据需要显示。我们可以定义它们，而不能定义它们，因为像网页设计中的大多数情况一样，我们不在乎项目的高度–高度将根据需要容纳内容而增加。

现在，我们如何在网格的最左上角放置一些东西？我们可以告诉网格像这样放置它：

.item {
  grid-column: 1 / 2; /* start at the first grid column line and end at the second */
}

这样的作品，虽然这.item更好地成为第一个孩子.grid 。否则，可能会在其中隐式放置其他内容， .item会.item下一个打开的行。如果我们要确保将其放置在左上角，则也可以执行以下行：

.item {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

现在，即使其他项目明确放置在此处，它们也肯定会位于左上角（它们只会重叠）。我们甚至可以使用grid-area属性来简化：

.item {
  grid-area: 1 / 1 / 2 / 2;
}

到目前为止，所有这些1和2可能已经足够直观了，但是在涉及列和行放置的更复杂的网格中，这些数字变得有点多了。

检查一下。在定义列时，我们可以使用单独的属性来命名它们：

.grid {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 
     200px  1fr  1fr;
  grid-template-areas:
    "pro    a    b"
    "pro    c    d";
}

grid-template-areas每个引用的组都是一行。里面是我刚刚编造的名字。只要对您有意义，就几乎可以是任何东西。看看“ pro”一词如何在两行中重复两次？这很重要，因为这是说我们可以将网格项目放置在值“ pro”所在的位置，它将位于三列的第一行中，并跨越两行。很直观，是吗？

我们将其放置为：

.pro-features {
  /* rather than */
  grid-area: 1 / 1 / 2 / 3;
  /* we can now do */
  grid-area: pro;
}

这是一个简单的示例：

在CodePen上查看 Chris Coyier （ @chriscoyier ）的“笔简单命名网格区域” 。

想要对网格进行更多描述吗？尝试在CSS注释中绘制它。

翻译自: https://css-tricks.com/simple-named-grid-areas/