我昨天在 An Event Apart 观看 Rachel Andrew 谈论 CSS 网格布局。 网格 非常棒，很快就会成为主要的 Web 布局工具。但现在还没有到来，因为没有稳定的浏览器 发布最新版本的规范（充其量它处于隐藏状态）。
好消息是，就在几天前， 规范 已经非常稳定，并进入了“候选推荐”状态。由于所有浏览器都一直在根据规范进行开发，因此所有稳定浏览器很快就会广泛支持未加前缀的网格。
坏消息是，它可能会在没有子网格支持的情况下这样做，Rachel 在她的演讲中很好地强调了这一点。
这是一些典型的“页面布局”HTML
<body>
<header class="site-header"></header>
<main class="main-content"></main>
<aside class="sidebar"></aside>
<footer class="site-footer"></footer>
</body>所有这些主要元素都是<body>的直接子元素，因此<body>可以作为网格，四个主要元素在此网格上布局。这有点像 Rachel 在 GridByExample 中的示例之一
但是……
……假设我们想从并非完全处于扁平化 HTML 结构中的元素构建网格。
<body>
<header class="site-header">
<h1>I want to use the grid.</h1>
<nav>Me too!</nav>
</header>
<main class="main-content">
<ul class="schedule">
<li>Me three!</li>
<li>Me four!</li>
</ul>
</main>
...
</body>我们可以嵌套网格，就像我们可以将 flexbox 嵌套在网格单元格中或将 flexbox 嵌套在 flexbox 中一样，但在上面的示例中，我们无法让这些子元素一起参与同一个网格。
您可以在 Jen Simmons 的 爵士海报示例中看到其中的一些工作原理。在 DOM 中，您可以看到一些元素，如果它们都可以在同一个网格上定位，那就太好了，但实际上它们却放置在不同的网格上。
子网格可能会有点乏味，因为它有点像“一直往下都是子网格”。要使我上面的小示例工作，它将类似于……
body {
display: grid;
}
.site-header {
/* current spec way... */
display: subgrid;
/* old way... */
display: grid;
grid: subgrid;
}
.main-content {
display: subgrid;
}
.main-content > ul {
display: subgrid;
}而且这还没有定义网格的实际工作方式。
Eric Meyer 也强调了对子网格的需求
如果没有子网格，您要么必须使要布局的每个元素都成为 body 元素（或用于创建页面网格的任何元素）的子元素，要么必须在每个嵌套网格中重新创建页面网格的片段，并放弃任何可以根据多个页面部分的内容进行灵活调整的列的希望。这两种解决方案都不理想。
他使用<form>标记 举例说明，其中<label>/<input>对必须在容器元素内分组，这意味着它们不能一起参与同一个网格。
他呼吁在无法处理这种情况之前不要发布网格
子网格是网格布局的主要组成部分，并且在网格布局从开发人员预览状态出现时，应成为任何网格布局实现的一部分。如果这意味着延迟网格的出现，我认为这是值得的。
那艘船可能已经启航了……
……在 CSS 网格“发布”的那天就拥有完整的子网格支持。但可能值得发出一些声音（例如撰写这篇博文）来表明这一点非常重要，并且应该在 CSS 网格的第一轮发布后尽快进行开发和发布。这不是我的想法，而是 Jen Simmons 说她将在 Mozilla 推动的事情。
更大的危险是子网格被认为是“有风险的”并且“可能会在 CR 期间被删除”。
顺便说一句，就“浏览器制造商人员”而言，进行这项工作的不一定是浏览器公司员工，而通常是外部提交者。这是一篇来自其中一位外部提交者的 博文，其中谈到了所有这些内容。
风险……
……是我们太喜欢网格布局了，以至于我们会错误地构建我们的 HTML 以使其工作。我们会使我们的 HTML 可访问性降低以使我们的网格想法起作用。我们会忽略语义并使我们的 HTML 扁平化。
或者也许没有人会这样做。但是，嘿，拥有这些工具会很好，这样它甚至都不会成为问题。
我想知道如何像这样在实时 3D 中开发一个配置器： http://viscircle.de/3d-konfiguratoren/?lang=en
最重要的问题是问题本身。我如何在网站上实现配置器？这就是问题所在！
我不知道您为什么选择这篇博文来提出您的问题，但我碰巧知道链接站点上使用的技术。他们使用 Blend4Web (https://www.blend4web.com/en/)，一个基于 Blender (https://www.blender.org/) 的 Web 库。我想，您也可以选择其他方案。
我希望在网格完全发布时，我们会获得对
display: contents;的支持。如果它按预期工作，我们将能够从显示上下文中“移除”元素，允许子元素的子元素上升一级并表现得像子元素。换句话说，我们可以有一个顶级网格容器，告诉它的子元素不要像网格子元素那样使用display: contents;，并允许子元素的子元素表现得像网格子元素一样，就像中间代不存在一样。糟糕，忘记了 Rachel 关于
display: contents;的帖子的链接 – https://rachelandrew.co.uk/archives/2016/01/29/vanishing-boxes-with-display-contents/嘿，感谢您撰写本文！我认为关于子网格如何工作的示例已经过时了，如果我没有弄错的话。 根据当前规范，创建子网格所需做的就是
display: subgrid;，而不是设置display和单独的grid属性。差别不大，但这确实使 CSS 更易于接受。绝对同意
subgrid支持至关重要。我们可以通过在子元素中重新创建父元素的网格来勉强维持，但最终我们会面临与浮动相同的挑战……对周围环境一无所知的元素，以及/或者并非为其内容量身定制的布局。有史以来最好的“我也是，我也是，我也是”的笑话用法……
很棒的阅读！我是 Susy 和 flexbox 的忠实粉丝，它甚至帮助我在特定情况下复制了一些需要移植到新世界应用程序的旧版网格，以避免必须移植整个框架或重写整个 HTML。
我需要更多关于网格的信息。这对基本网站有什么作用？文章中显示的所有内容现在都可以使用 flexbox 和常规块级元素来实现。考虑到大多数 Web 正在转向移动端，几乎所有内容都只是块。
我对网格有什么遗漏？它让我想起了一些由印刷设计师制作的早期网站，它们只是将每个页面都制作成一个巨大的图像以使布局完美。网格是印刷设计师的概念在 Web 上的应用吗？如果是这样，我不确定它是否真的需要。
那么，我对网格有什么遗漏？这里有什么非印刷设计师不明显的魔法吗？
http://lmgtfy.com/?q=css+grid
你可以使用`position: absolute`、`float`、表格等实现 Flexbox 的所有功能，但这并不意味着这是一个好主意……Flexbox 并非真正用于页面布局，它更适合于组件（因为无法像跨多行匹配 Flex 项目高度那样做）。Grid 应该能够更好地处理更大的布局和结构。
Grid 的列/行可以自动调整大小（基于其内容大小），但仍然可以对齐。对齐和自动调整大小是关键。如果你有一组用于列的`float`或`flex-box`，每个内部都有一组用于行的，除非你手动调整它们的大小，否则它们不会对齐。
感谢您的说明，我做了一些研究，看起来 Grid 可以更容易地处理一些布局问题。但是子网格呢？这似乎是这篇文章中最大的抱怨，每个人都说 Flexbox 用于内容，这似乎与子网格相同。似乎存在逻辑冲突。（或者可能有些人只是不喜欢 Flexbox？）
Grid 规范非常棒，原因与 Flexbox 一样：更少的标记、更少的样式、更少的膨胀，以及一些很酷的功能，例如源顺序。
你一直都可以使用`position: absolute;`等来实现这些功能，但它们很混乱，需要大量工作才能“正确”。Grid 规范使这类事情变得简单。
子网格的争论是因为大多数工具都受益于递归的能力。如果 Grid 规范在浅层起作用，为什么嵌套时不起作用呢？
我同意这方面几乎所有人的观点……只需等待子网格。
我认为在这一点上风险很低。我倾向于在子网格可用之前不开始使用 Grid。这意味着，与其暂时更改我的标记以使其与 Grid 协同工作，然后在子网格获得支持后再次更改，我宁愿继续使用`float`和 Flexbox，直到完整的解决方案可用。
我对与 Grid 规范竞争不感兴趣（因为我没有访问他们拥有的相同变量，而且我觉得 Grid 规范会让我摆脱我的痴迷），但我最近构建了一个 PostCSS 插件，如果规范作者想要推迟子网格支持（他们应该这样做），它可以抑制大众。
该插件是在不知道任何关于 Grid 规范的情况下开发的，但最终包含了许多类似的概念。
它没有共享相同的 API，但我认为这并不是一件坏事（因为它可能会在规范实际落地时造成混淆）。但是，该 API 非常易于组合、轻量级，并提供了一些功能，例如组合固定的 CSS 长度（例如`100px`）和真正的分数（`1/4`而不是`fr (flex-grow)`单位）。它还提供了一种填充剩余空间的方法，我目前正在研究一种生成列和行的方法——非常类似于规范，但并不完美（在撰写本文时，它只会生成列）。
最有趣的是，它生成的尺寸是可以提取的，因此你可以在任何地方使用它们，而无需与转换整个网格混淆。
我尝试在几个地方推广它，但它从未获得关注。我想每个人都处于这样一种心态：他们用 Flexbox 替换了网格，并且不想“回去”。我理解这一点，但 Flexbox 从来都不是网格系统的替代品（说真的，在这方面它很糟糕）——我创建的插件也不与 Flexbox 竞争。随意在需要的地方使用 Flexbox。
此插件充当传统 CSS 网格和 Grid 规范之间的桥梁——同时提供了一些很酷的功能，例如轻松的比例缩放（http://alistapart.com/article/content-out-layout），而 Grid 规范本身无法提供（我将在规范落地时移植该功能）。并且它可以在 IE9 中无缝工作，因此你无需忽略所有停留在旧版/资金不足的浏览器上的用户。
我目前正在对其进行重构。我将在几天内完成，并且 API 将被锁定。我建议你现在不要用它构建任何网站，但是关注一下，下周再回来查看可能是个不错的主意。
在不允许你使用 Grid 规范的任何地方（即使是使用最新浏览器的用户，也至少有几个百分比）以及规范作者确定是否支持子网格的这段过渡期间，随意使用它。
或者不使用。
Chris，你曾经写过一篇名为“不要过度思考网格”的文章。我没有读过那篇文章（我读过了）。postcss-ant 就是结果。
一篇关于使用`display: contents`解决此问题的两分钟阅读文章。
https://medium.com/@ollie_w/whats-so-great-about-display-contents-ce5628ebce86#.z9whk9f3c