CSS：权威指南，第 5 版

第 12 章 网格布局 网格布局

本作品已使用人工智能进行翻译。欢迎您提供反馈和意见：[e-mail]

在，CSS的中心有一个布局形状的洞。设计师们为了实现布局的目的，对其他功能进行了修改，其中最著名的是float 和clear ，他们一般都是通过黑客手段来弥补这个漏洞。Flexbox布局帮助填补了这一空白，但Flexbox实际上是为特定用例而设计的，例如导航栏（navbars），如第11章所示。

相比之下，网格布局是一种通用的布局系统。网格布局强调行和列，乍一看可能会让人觉得它又回到了表格布局--从某些方面来说，这也不为过，但网格布局比表格布局要丰富得多。网格布局允许设计片段独立于其文档源顺序进行布局，甚至可以按照你的意愿将布局片段重叠。CSS 提供了强大而灵活的方法，可用于定义网格线的重复模式、将元素附加到网格线上等。你可以在网格内嵌套网格，也可以将表格或 Flexbox 容器附加到网格上。还有更多更多。

简而言之，网格布局是我们期待已久的布局系统，2017 年，它登陆了所有主流浏览器引擎。 它将许许多多难以实现、甚至不可能实现、而且总是很脆弱的布局，简单、灵活、稳健地创建出来。

创建网格容器

创建网格的第一步是定义网格容器。这很像定位中的包含块或柔性框布局中的柔性容器：网格容器是一个为其内容定义网格格式上下文的元素。

在这一基本层面上，网格布局很容易让人联想到 flexbox。例如，，网格容器的子元素成为网格项，就像柔性容器的子元素成为柔性项一样。这些网格项的子元素不会成为网格元素--尽管任何网格项本身都可以成为网格容器，从而使其子元素成为嵌套网格的网格项。我们还可以在网格中嵌套网格，直到一直都是网格为止。

CSS 有两种 网格：常规网格和内联网格。这些网格是通过display 属性的特殊值创建的：grid 和inline-grid 。前者生成的是块级方框，后者生成的是内联级方框。图 12-1说明了两者的区别。

图 12-1. 网格和内联网格

这些值与display 的block 和inline-block 值非常相似。您创建的大多数网格都可能是块级网格，不过如果您需要，也可以创建内联网格。

虽然display: grid 创建了块级网格，但该规范明确指出 "网格容器不是块容器"。虽然网格框与块容器一样参与布局，但两者之间还是有区别的。

首先，浮动元素不会侵入网格容器。这意味着在实际操作中，网格不会像块容器那样在浮动元素下滑动。有关区别的演示，请参见图 12-2。

图 12-2. 浮子与块和网格的交互方式不同

此外， 网格容器的边距不会随其后代的边距折叠。这一点同样有别于块方框，后者的边距会（默认情况下）随后代折叠。例如，有序列表中的第一个列表项可能有顶边距，但这个边距会随着列表元素的顶边距折叠。而网格项的顶边永远不会随其网格容器的顶边折叠。图 12-3说明了两者的区别。

图 12-3. 保证金崩溃和缺乏保证金

CSS的一些属性和功能不适用于网格容器和网格项：

• 当应用于网格容器时，所有 ...