一位读者来信专门询问如何在 CSS Flexbox 中构建此布局
我的答案：这并不是 CSS Flexbox 的布局。如果您必须这样做，您可以 实现它，但您需要某种策略，例如将导航和文章组合到父元素中（如果不是更多组合）。CSS Grid 就是为了描述这种布局而诞生的，它将更容易使用，更不用说这两者的浏览器支持如今基本相同了。
“圣杯”是什么意思？
看，孩子们，网络上的布局曾经是 *非常糟糕的*，以至于上面这个难以置信的简单图表相对难以实现，特别是如果您需要那里的“列”具有相同的的高度。我知道，很荒谬，但事实就是这样。我们使用了超级奇怪的黑客手段来完成它（例如巨大的负边距与正填充配对），随着时间的推移，这些方法演变成更简洁的技巧（例如 模仿列 的背景图像）。能够成功实现这些技巧的技术将其称为 圣杯。（为了更加清楚起见，*通常*，圣杯指的是中间有内容的三列布局，但要点是列的高度相等）。
CSS 现在更加强大，因此我们可以使用它在不求助于黑客手段的情况下完成合理的事情，例如实现此基本布局。
以下是 CSS Grid 中的实现
此网格使用 grid-template-columns 和 grid-template-rows 进行设置。这样，我们就可以非常具体地指定希望这些主要站点部分落在哪里。
我添加了一些额外内容
- 前几天有人问我另一个问题，关于如何在网格区域之间创建 1px 的线条。诀窍很简单，让父元素具有背景颜色并使用
gap: 1px;，因此我在上面的演示中进行了此操作。 - 小屏幕可能会切换到单列布局。我在上面的媒体查询中进行了设置。有时我会在父元素上使用
display: block;关闭网格，但在这里我保留了grid并重置了列和行。这样，我们仍然可以获得间隙，并且可以根据需要重新排列内容。 - 最近有人问我的另一个问题是，您可以在上面的演示中看到的微妙的“主体边框”效果。我尽可能地简单地实现了它，在主体和网格包装器之间添加了一点填充。我最初是在主体和 HTML 元素之间执行此操作的，但是对于全页面网格，我认为使用包装器 div 而不是主体作为网格更明智。这样，注入到主体中的第三方内容就不会导致布局异常。
嘿，我不明白这个：
grid-column: 2 / 3;您只定义了两列。这是打字错误还是我错过了关于模板语法的某些内容？谢谢！
两列创建三条网格线！
想象一下，这些管道是 2 列布局中的三条网格线。
从列线 2 开始到列线 2 结束表示“放在第 2 列”。
我知道 CSS 约定有所不同，但我希望他们在这里从 0 开始计数。
这样，如果有 2 列
0 - 最左侧的线
1 - 中间
2 - 最右侧的线
看起来更直观。
是否可以在小屏幕上将 aside 放置在 article 下方？
完全可以 - 而且你知道吗 - 我刚刚更新了演示以实现这一点。实际上，aside 应该在标记中位于 main content 之后，并且只需将其移动到那里即可，因为我们在桌面端明确地指定了内容的位置。
哇，给父元素着色并留下间隙……听起来我们回到了大约 20 年前的 peek-a-boo 表格时代。在打印时，我放弃了这种方法，因为浏览器有自己的设置来控制是否打印背景颜色。但是如果它有效，我无法反驳。容器不像两列表格那样共享边框，因此以其他方式在它们之间获取一个像素可能很麻烦。
我希望 CSS 网格可以做的一件事是将文章标题居中并全宽，将文章内容放在左侧面板，然后将 aside 放在右侧面板。
因此，在您的示例中，文章的 H1 将以某种方式定位在标题所在的位置，而文章内容和 aside 将并排放置。
如果您尝试保持语义化，我看不出这如何实现。您必须将 H1 从 article 标签中取出，然后将其放置在……哪里？
编辑
嘿，Chris，
感谢这篇文章！
关于网格中滚动的问题。
如何在全页面网格布局中让每一列独立滚动溢出内容（不声明高度）？没有或标签的滚动条，只有内容溢出的列。您如何在网格中执行此操作，或者 Flex 是否是更好的选择？
再次感谢！
为了使溢出/滚动发生（并且有意义），*某些东西*必须限制高度/宽度。我设想父网格本身占据整个页面，部分内容使用
fr单位尽可能地填充区域，然后您告诉这些单独的部分根据需要滚动。在此示例中，自然地，只支持主内容和 aside 部分的滚动。然后您可以为它们（并且仅在大屏幕上）添加
overflow-y:auto@media (min-width: 600px) {.page-main,.page-sidebar {
overflow-y:auto;
}
}
Hi Chris，在哪些情况下您使用负值，例如：
grid-column: 1 / -1;来自秘鲁的问候
这意味着：从第一条网格线开始，到最后一条网格线结束。
非常感谢！我不需要数行代码了:D
在使用CSS GRID进行布局的上下文中，使用类而不是HTML元素作为选择器（就像您在这里所做的那样）是否存在兼容性、灵活性或战略价值/优势？
感谢您的辛勤工作！
非常棒的文章。但是如何在IE11中实现这个效果？（抱歉，我不得不问）。谢谢
不错，但我并不完全认同“CSS Grid和Flexbox的支持度大致相同”的说法。Caniuse.com显示前缀版本分别有4.55%和0.66%不支持——这意味着问题事件多出了7倍！
您是如何创建可点击部分来展开和折叠文章的？
我不明白它是如何工作的。
这是details标签的默认行为
查看此链接 https://mdn.org.cn/en-US/docs/Web/HTML/Element/details
您好，Coyier先生——我喜欢您的设计，但我无法在W3C验证器上通过验证（https://validator.w3.org）。在修改代码后，我发现“@media”规则下的三个花括号处存在一个CSS解析错误。是否有任何方法可以重新格式化此设计，使其能够通过解析检查？每当我尝试通过移动花括号进行更改时，整个设计的样式都会崩溃，这并不是批评。感谢您查看此评论。