圣杯是一种在网络上非常常见的布局模式。它由页眉、左侧固定宽度导航的主内容区域、中间的内容和右侧固定宽度的侧边栏以及页脚组成。
圣杯是通过各种方法实现的，最近最引人注目的可能是Flexbox.CSS网格布局是另一种方法，当浏览器支持变得更好时，它应该被证明是最合适和最直接的方式。它是专门为轻松完成整个页面布局而设计的。
直播Demo
如果你有支持的浏览器，你可以在这里看到这个演示。这里有[快速说明]（/css/css-grid-layout-intro/# enable-in-chrome)关于如何在Fixefox和Chrome中启用网格布局。
Markup
标记非常简单，创建布局所需的元素数量很少，而且是语义的：
1<div class="container">
2 <header>
3 <!-- Header content -->
4 </header>
5
6 <nav>
7 <!-- Navigation -->
8 </nav>
9
10 <main>
11 <!-- Main content -->
12 </main>
13
14 <aside>
15 <!-- Sidebar / Ads -->
16 </aside>
17
18 <footer>
19 <!-- Footer content -->
20 </footer>
21</div>
网格
使用网格区域和fr单位，我们是这样定义容器上的网格的：
1.container {
2 display: grid;
3
4 grid-template-areas:
5 "header header header"
6 "nav content side"
7 "footer footer footer";
8
9 grid-template-columns: 200px 1fr 200px;
10 grid-template-rows: auto 1fr auto;
11 grid-gap: 10px;
12
13 height: 100vh;
14}
请注意，容器上使用了Height：100vh(100%视区高度)，以将栅格至少延伸到视区的完整高度。我们网格的中间行被设置为1FR的高度，以便在需要时获得额外的空间。
网格项目
使用grid-area属性将网格项放置在网格上非常简单：
1header {
2 grid-area: header;
3}
4
5nav {
6 grid-area: nav;
7 margin-left: 0.5rem;
8}
9
10main {
11 grid-area: content;
12}
13
14aside {
15 grid-area: side;
16 margin-right: 0.5rem;
17}
18
19footer {
20 grid-area: footer;
21}
奖励：使其响应
很容易使用媒体查询，只需更改网格容器上的几个属性，就可以在较小的设备上将所有内容合并为一列：
1@media (max-width: 768px) {
2 .container {
3 grid-template-areas:
4 "header"
5 "nav"
6 "content"
7 "side"
8 "footer";
9
10 grid-template-columns: 1fr;
11 grid-template-rows:
12 auto /* Header */
13 minmax(75px, auto) /* Nav */
14 1fr /* Content */
15 minmax(75px, auto) /* Sidebar */
16 auto; /* Footer */
17 }
18
19 nav, aside {
20 margin: 0;
21 }
22}
网格与Flexbox
网格不是Flexbox的替代品，Flexbox仍然是一维布局和微布局的正确解决方案。将网格布局和FlexBox布局结合在一起非常容易，而且它们的设计可以很好地协同工作。
例如，我们可以在页眉上使用FlexBox，以使页眉容器内的元素在水平轴上均匀分布：
1header {
2 grid-area: header;
3
4 display: flex;
5 justify-content: space-between;
6 align-items: center;
7}