本文翻译自《Full-Bleed Layout Using CSS Grid》。

过去，每个人都力图创建一种黄金标准的网站布局：圣杯布局。但众所周知，这种布局很难做到正确。

这看起来似乎不是那么棘手，对吧？但那是flex布局出现之前的时代；我们用于这项工作的工具是表格和浮动布局，但两者都不能真正胜任这项任务。这在技术上是可行的，但需要一些额外技巧。

一旦flex获得主流浏览器支持，这种布局就从“圣杯”变成了“喷泉饮料”；它无处不在，因为它提供了出色的用户体验，并且所有开发人员都可以使用。

随着网络的发展，我发现了一种新的理想的布局。它提供了极好的用户体验，尤其是对于新闻文章或文档等长篇文本内容。但是，就像它的前辈一样，它很难实现；大多数实现都需要晦涩难懂的黑客手段或违反直觉的技巧。

我最近发现了一个使用CSS Grid的优雅解决方案。在这篇文章中，我们将了解它的工作原理！

问题所在

你曾经尝试过在超大屏幕上阅读维基百科吗？它看起来像这样：