使用 CSS Grid 创建“圣杯布局”

引言

圣杯布局是一种包含固定宽度的页头、页脚、左侧边栏、右侧边栏和流体主体内容的布局，如下所示

传统上，它通过 负边距技术 实现。

说实话，这对我来说意义不大，看起来更像一堆技巧。幸运的是，`display: grid` 已经出现，它允许我们以更具语义意义的方式构建二维布局。

标记

让我们定义我们的标记如下

<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>

样式

首先，我们定义容器使用网格布局

.grid {
  display: grid;
}

正如你可能已经注意到的，我们的网格有 3 行。为了简单起见，让我们使它们相等。

grid-template-rows: repeat(3, 100px);

我们为此使用 `repeat` 函数，它将指定的行重复多次。

我们还有 3 列：第一列和最后一列是固定宽度，而中间列占据所有剩余空间。

grid-template-columns: 150px 1fr 150px;

这里 `fr` 是一个新的单位，表示可用空间的比例。这里，中间列消耗可用空间的一个比例。

我们的完整容器样式如下

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

现在我们必须让页头和页脚跨越所有 3 个可用列

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

这是以下内容的简写

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

或者

header, footer {
  grid-column-start: 1;
  grid-column-end: span 3;
}

这意味着页头和页脚跨越 3 列。

现在我们只需要分配网格行

header {
  grid-row: 1;
}

.sidebar-left {
  grid-column: 1;
  grid-row: 2;
}

article {
  overflow: hidden;
  grid-column: 2;
  grid-row: 2;
}

.sidebar-right {
  grid-column: 3;
  grid-row: 2;
}

footer {
  grid-row: 3;
}

Internet Explorer 11 支持

此功能 可用于所有现代浏览器，但如果你仍然需要支持 Internet Explorer 11，则需要一些特殊的浏览器前缀。

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 150px 1fr 150px;
      grid-template-columns: 150px 1fr 150px;
  -ms-grid-rows: 100px 100px 100px; //repeat does not work
      grid-template-rows: repeat(3, 100px);
}

以及对 grid-column 和 grid-row 的一些前缀，如下所示

header, footer {
  -ms-grid-column: 1;
      grid-column-start: 1;
  -ms-grid-column-span: 3; //the way to span columns
      grid-column-end: span 3;
}

结论

正如你在本文中看到的，网格布局允许我们以更具语义的简洁方式创建二维布局，而无需使用 CSS 技巧。由于它们受所有现代浏览器支持，因此它们现在已成为创建二维布局的事实标准。