一个 grid 布局的应用

一个看似简单的布局如下所示, 要求文字内容居中，且一行不超过65个字符。如果正文中有图片，则图片宽度等于页面宽度。

文字内容宽度有上限 但其中如果出现图片，则可以占满空间

这个要求是非常合理的，因为在阅读文字时，一行过长的文字会让人产生跨行疲劳，影响体验。有研究表明，针对罗马字符，一行65个字符时，用户体验最佳。但阅读图片时，则不需要做这样的限制，反而充满页面宽度的图片会显得更加优雅。

能够实现这个效果的方法有很多，最简洁的应该是使用 grid布局，解法如下：

.wrapper {
  display: grid;
  grid-template-columns:
    1fr
    min(65ch, 100%)
    1fr;
}
.wrapper > * {
  grid-column: 2;
}
.full-bleed {
  width: 100%;
  grid-column: 1 / 4;
}

<main class="wrapper">
  <h1>Some Heading</h1>
  <p>Some content and stuff</p>
  <img class="full-bleed" alt="cute meerkat" src="/meerkat.jpg" />
</main>