简单命名的网格区域

我认为 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 {
  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;
}

这是那个简单的示例

查看 Pen 简单命名的网格区域 by Chris Coyier (@chriscoyier) on CodePen.

想要更详细地描述一个网格吗？ 尝试在 CSS 注释中绘制它。