使用CSS网格的全出血布局

当时，有一个每个人都努力创建的黄金标准的网站布局，但这是出了名的难以做到正确：

这看起来不会那么棘手，对吧？但这是在FlexBox出现之前的一个时代；我们的工作工具是桌子和花车，两者都不能真正胜任这项任务。这在技术上是可行的，但需要一些恶作剧。

一旦FlexBox获得主流浏览器的支持，这种布局就从圣杯变成了无处不在的喷泉饮料，因为它提供了很棒的用户体验，所有的开发者都能买得起。

随着网络的发展，我发现了一种新的令人向往的布局。它提供了非常棒的用户体验，特别是对于像新闻文章或文档这样的长格式文本内容。但是，就像它的前身一样，它一直很难实现；大多数实现都需要晦涩难懂的技巧或违反直觉的技巧。

我最近发现了使用CSS Grid来解决这个问题的一个很好的解决方案。在这篇文章中，我们将学习它是如何工作的！

本教程完全是关于我如何构建桌面布局的。在移动设备上观看它应该还是有意义的，但是你会错过一些互动元素。如果可以的话，我建议你在电脑上查一下！

你有没有试过在很大的屏幕上阅读维基百科？它看起来是这样的：

那些段落太宽了！维基百科根本不限制容器的宽度。这导致行的长度为数百个字符。

当我们到达一条线的两端时，我们的眼睛很难绕过去。如果你和我一样，你最终会用你的鼠标来帮助：

除了换行的问题外，通常很难阅读这么宽的文本行；它会使眼睛疲劳。

研究表明，理想的行长约为65个字符。在罗马字母的上下文中，45到85之间的任何地方通常被认为是可以接受的。阅读是一个复杂的过程，我们应该努力使它变得尽可能简单。

此问题的标准解决方案是在页面中心创建单个固定宽度的列。您在任何地方都可以看到这种布局：在线杂志、文档、新闻网站和博客。你现在正看着它，就在这个网站上！

然而，有一个复杂的因素-不是所有的内容都应该受到限制。我们应该允许图像、视频和自定义小部件自由释放并填充可用宽度：

这只猫鼬被用作挣脱束缚的孩子的例子。肖恩·保罗·金尼尔摄。

这类事情的通用术语是“全血”。这是从出版界借来的一个术语；当一件东西完全印出来时，它就延伸到了纸的边缘。

这一新要求使问题变得更加棘手。约束所有孩子相对容易，但是CSS并没有真正有选择地约束某些孩子的机制。

如果您不熟悉CSS网格，这可能看起来像是大量的随机字符和关键字。不要害怕！一切都会得到解释的。

GRID-TEMPLATE-COLUMNS是一个允许我们定义格线形状的属性。通过提供3个离散值，我们表示需要3列。

这些值定义每列的宽度。第一列为1FR，与最后一列相同。FR单元是填充可用空间的灵活单元。它在原则上类似于弹性增长；它是列应该消耗多少空闲空间的比率。

我们的中柱是固定宽度的。我们使用min辅助对象来拾取最终较小的值。在大屏幕上，它将占用65ch宽度。在较小的屏幕上，如果没有足够的水平空间容纳65个字符，它将被夹紧到可用容器宽度的100%。

默认情况下，子项将被放入第一个可用的栅格单元格中。不过，我们希望覆盖此默认行为；所有子级都应该坐在中间列，将第一列和第三列留空。

星号(*)是通配符；它将匹配所有类型的元素。我们的意思是，每个孩子都应该被分配到第二个中间纵队。每个新子对象都将创建一个新行，如下所示：

我们已经看到了网格是如何约束所有类型的元素的，但是当我们想要一个孩子挣脱出来并填满可用的宽度时，该怎么办呢？

这个特殊的.Full-bleed类允许特定的子级从该列中突显出来，并跨越所有3列。1/4是一种开始/结束语法；我们要说的是，元素应该从第1列(包括第1列)开始，一直跨越到第4列(不包括)。

诀窍是每个子级都成为自己的网格行，每个子级可以根据需要填充该行。大多数元素将只占据中心列，但有些元素将跨越所有3个元素。

有时候，你不会想让一个孩子在超宽屏上真正地满身是血，这可能是相当大的。通过一个小调整，我们可以创建一个伪全出血变量，将其宽度钳制为某个较大的值：

CSS网格是超级强大的，现在它已经实现了对浏览器的广泛支持，它可以解决我们的许多问题！

我计划写更多关于CSS网格的内容，所以如果你想了解更多，请务必加入时事通讯。💖