CSS网格：圣杯布局

圣杯是一种在网络上非常常见的布局模式。它由页眉、左侧固定宽度导航的主要内容区域、中间内容和右侧固定宽度侧边栏以及页脚组成。

圣杯已经使用多种方法实现，可能最近最引人注目的是 Flexbox。 CSS 网格布局是另一种方法，当浏览器支持变得更好时，它应该被证明是最合适和最直接的方法。它专为轻松完成整页布局而设计。

现场演示

如果您有支持的浏览器，您可以在此处看到这个演示。这里是快速说明如何在 Fixefox 和 Chrome 中启用网格布局。

标记

标记非常简单，创建布局所需的元素数量极少且符合语义：

<div class="container">
  <header>
    <!-- Header content -->
  </header>

  <nav>
    <!-- Navigation -->
  </nav>

  <main>
    <!-- Main content -->
  </main>

  <aside>
    <!-- Sidebar / Ads -->
  </aside>

  <footer>
    <!-- Footer content -->
  </footer>
</div>

网格

使用网格区域和 fr 单元，我们在容器上定义网格的方法如下：

.container {
  display: grid;

  grid-template-areas:
    "header header header"
    "nav content side"
    "footer footer footer";

  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-gap: 10px;

  height: 100vh;
}

注意在容器上使用 height: 100vh (100% viewport height) 将网格扩展到至少视口的整个高度。我们网格的中间行设置为 1fr 的高度，以便在需要时占用额外的空间。

网格项目

使用 grid-area 属性将网格项放置在网格上非常简单：

header {
  grid-area: header;
}

nav {
  grid-area: nav;
  margin-left: 0.5rem;
}

main {
  grid-area: content;
}

aside {
  grid-area: side;
  margin-right: 0.5rem;
}

footer {
  grid-area: footer;
}

奖励：使其响应

使用媒体查询很容易，只需更改网格容器上的一些属性即可在较小的设备上将所有内容折叠成一列：

@media (max-width: 768px) {
  .container {
    grid-template-areas:
      "header"
      "nav"
      "content"
      "side"
      "footer";

    grid-template-columns: 1fr;
    grid-template-rows:
      auto /* Header */
      minmax(75px, auto) /* Nav */
      1fr /* Content */
      minmax(75px, auto) /* Sidebar */
      auto; /* Footer */
  }

  nav, aside {
    margin: 0;
  }
}

网格和弹性盒

Grid 不是 Flexbox 的替代品，Flexbox 仍然是一维布局和微布局的正确解决方案。将网格和 flexbox 布局结合起来非常容易，并且它们被设计为可以很好地协同工作。

例如，我们可以在 header 上使用 flexbox，让 header 容器内的元素均匀分布在水平轴上：

header {
  grid-area: header;

  display: flex;
  justify-content: space-between;
  align-items: center;
}