CSS 网格：一种布局，多种方式

我一直很享受学习 CSS 网格。 这一功能正在开始在许多浏览器中发布，看起来我们很快就能在生产环境中使用它。

CSS 网格最让我印象深刻的一点是其语法非常灵活。 为了说明这一点，我们将看看如何用三种不同的方式创建相同的布局，所有这些都使用 CSS 网格属性。 特别地，我们将使用 圣杯布局 作为我们的例子

首先，我们将定义一个父元素，名为 .grid，并设置三列和三行，为不同的布局方法做好准备

.grid {
  display: grid;
  grid-template-columns: 150px auto 150px;
  grid-template-rows: repeat(3, 100px);
  grid-gap: 1em;
}

这表示我们的 .grid 元素有三个列（两个设置为 150px，一个灵活地占用剩余空间）和三个行（所有都设置为 100px，用于演示目的）。

我们还将在每个示例中使用以下子元素：<header>、<footer> .sidebar-left、sidebar-right 和 <article>。 这些将是我们布局的基础，并在 HTML 中表示如下

<div class="grid">
  <header>
    Header
  </header>

  <aside class="sidebar-left">
    Left Sidebar
  </aside>

  <article>
    Article
  </article>

  <aside class="sidebar-right">
    Right Sidebar
  </aside>
  
  <footer>
    Footer
  </footer>
</div>

好了，让我们用 CSS 网格以三种方式重新创建它！

方法 1：指定网格列

我们可以直接在元素本身定义每个子元素占据的网格单元格

header {
  /* Start on Row 1 */
  grid-row: 1;
  /* Start on the first column line and extend all the to the last column line */
  grid-column: 1 / 4;
}

.sidebar-left {
  /* Start on Row 2 */
  grid-row: 2;
  /* Start on the first column line and stop at the next column line */
  grid-column: 1 / 2;
}

article {
  /* Start on Row 2 */
  grid-row: 2;
  /* Start on the second column line and stop at the third column line */
  grid-column: 2 / 3;
}

.sidebar-right {
  /* Start on Row 2 */
  grid-row: 2;
  /* Start on the third column line and stop at the last column line */
  grid-column: 3 / 4;
}

footer {
  /* Start on Row 3, the last row */
  grid-row: 3;
  /* Start on the first column line and extend all the to the last column line */
  grid-column: 1 / 4;
}

查看 CodePen 上 Geoff Graham 的 CSS 网格 - 圣杯 1。

这为我们提供了创建布局所需的一切！ 但是，我们还可以做得更好，所以让我们继续前进。

方法 2：压缩第一种方法的标记

CSS 网格足够智能，可以计算出侧边栏和文章在哪里，只要我们指定 <header> 和 <footer> 的位置即可

header, footer {
  grid-column: 1 / 4;
}

就是这样！ 由于我们已经确定 <header> 和 <footer> 都应该占据 .grid 元素的整个宽度，CSS 网格将流入剩余的元素，而无需我们告诉它任何其他信息。 太棒了！

查看 CodePen 上 Geoff Graham 的 CSS 网格 - 圣杯 2。

方法 3：定义网格模板区域

CSS 网格还允许我们使用 grid-area 属性为元素命名，并使用 grid-template-areas 属性将它们放置在父元素上。

让我们使用 grid-area 为子元素命名

header {
  grid-area: header;
}

footer {
  grid-area: footer;
}

.sidebar-left {
  grid-area: sidebar-1;
}

article {
  grid-area: article;
}

.sidebar-right {
  grid-area: sidebar-2;
}

现在，让我们使用 grid-template-areas 在父 .grid 元素上命名这些区域

.grid {
  display: grid;
  grid-template-columns: 150px auto 150px;
  grid-template-rows: repeat(3, 100px);
  grid-gap: 1em;
  grid-template-areas: "header header header"
                       "sidebar-1 article sidebar-2"
                       "footer footer footer";
}

您看到我们是如何通过在属性上添加命名区域来创建布局的吗？ 这几乎就像是在我们的代码中拥有一个可视化编辑器！

查看 CodePen 上 Geoff Graham 的 CSS 网格 - 圣杯 3。

总结

我们当然可以更深入地研究 CSS 网格的强大功能，但我想具体探讨一下在创建布局（尤其是过去使用浮动时难以创建的布局）方面，它的语法是多么灵活。

除了这里介绍的方法之外，我们还可以用 CSS 网格实现圣杯布局吗？ 欢迎在评论区分享您的想法，我们将很乐意添加进来。