有一段时间我们觉得 CSS Grid 太棒了。 它在所有主要浏览器中同时快速推出。 现在，随着 Grid 的使用越来越多，我们看到人们希望从 Grid 中获得更多功能。
Michelle Barker 列出了她的愿望（我会在后面发表我的评论）
- 样式化行和列间隙。 我也听说过直接为网格单元格设置样式的请求，而不是需要在那里放置一个元素并为该元素设置样式。
- 多个间隙值。 我上周就想要这个功能，有人告诉我使用一个空的列或行而不是间隙。 该列的大小是可以控制的，并且相应地放置内容以将其视为间隙。 还可以，只是对隐式网格不太友好。
- 自动流模式。 这很聪明。 查看 Michelle 的用例和建议。
- 使用
fr单元的calc()。 这是一个令人费解的问题。 我可以理解想要做类似calc(1fr - 100px)的事情，但剩余的空间不是少了 100px，然后 1fr 重新计算以填充该空间吗？ 似乎是无限循环。 - 纵横比网格单元格。 我怀疑，如果我们获得这个功能，它将是一个通用的纵横比解决方案，适用于任何元素，包括放置在网格上的元素。
Subgrid 也开始被热烈请求，我明白为什么。 在构建我使用 Grid 完成的最后一个页面布局时，我强烈希望能够在子元素中共享整体页面网格线。
Rachel Andrew 大约六个月前在 CSS Grid Level 2：Subgrid 来了中谈到了它的状态。 我不确定它现在处于什么状态，但我认为还没有任何浏览器支持它。（我甚至不确定规范是否在技术上已完成。）
Brad 指出了这里的需求
容器查询和 Subgrid 将使我的设计系统工作变得更加容易。
定义一个网格并在其中放入一些组件，然后观察它们如何捕捉到父网格并无论容器尺寸如何都看起来很棒。
— Brad Frost (@brad_frost) 2019年2月11日
以及 Ken Bellows 写道
- 如果我们将 Subgrid 与卡片内的
grid-template-areas结合起来（如果你不知道网格区域，请阅读我的上一篇文章，它会让你大吃一惊），复杂的响应式基于卡片的布局将变得微不足道。- 在两个轴上使用 Subgrid 的前景为我们提供了一种实现相对网格定位的方法，至少对于语义分组的项目而言，就像我上面希望的那样！ 将你的内容分组到一个容器中，在网格上定位该容器，使该容器在两个轴上都成为一个 Subgrid，并声明你的轨道相对于 Subgrid 元素的网格位置！
- 在 Flexbox、Grid、
display: contents和 Subgrid 之间，我们最终将拥有编写非常精简、干净、语义化标记所需的一切，基本上没有填充或纯粹的结构元素。 这将极大地有利于可访问性、SEO 以及试图理解你的标记的开发人员！
Eric Meyer 三年前称 Subgrid 为一项基本功能
这就是为什么我和其他网格专家（如Rachel）得出相同的结论：Subgrid 是网格布局的主要组成部分，并且在它从开发者预览状态出现时应该成为任何网格布局实现的一部分。 如果这意味着延迟网格的出现，我认为这是值得的。
当然，每个人仍然想要 原生砌体布局。 ;)
Subgrid 功能是第 2 级规范的一部分。 非常重要的是，如果人们希望浏览器实现此功能（或任何功能），他们需要不断提出要求。
因此，如果 Subgrid 是您想要的功能，请写下原因、提供您的用例，并在此处发表评论。 我们有规范，它无疑会在浏览器实现者使用它时得到改进，但这就是规范开发的工作方式。 CSS 工作组不会“完成”一个规范并将其交给浏览器工程师。 这是一个迭代过程。 我们现在需要看到浏览器中的一些实现——即使是在标志后面。 在这一点上，我们都可以使用它并提供反馈。
原生砌体布局——看在上帝的份上，是的！
我有一个更适度的愿望清单。
SVG 元素在所有浏览器中使用 CSS Grid 缩放的方式并不一定相同。 如果您有一个可变宽度的列，并且希望该列充满一个应该拉伸以适应的 SVG 元素，那么它可能会在 Chrome 中使用最少的 CSS 和 SVG 元素的正确 preserveaspectratio 设置很好地做到这一点。 但这在您在 Chrome 中构建它的其他浏览器中将无法正常工作。
我还希望有一些 CSS Grid 方法可以将图像浮动到一侧，并使文本环绕它。 但是没有这个功能很好，因为这意味着我使用浮动或以不同的方式解决视觉设计问题，这是一个不错的挑战。
我不确定 Subgrid，因为我认为“继承”以及 display: contents 已经走得很远了。
前几天在尝试将表单转换为 CSS Grid 时，我意识到原始表单使用了太多容器和过多的 div 汤，div 围绕标签，div 围绕输入，以及每个对周围的更大的 div 容器。 我只想在没有类标签的情况下，当然也没有 div 的情况下，让 label 后面接 input，以便将其整齐地设置样式。
问题在于该模板用于此特定 CMS 的后端和前端。 因此，我不能仅仅删除表单中的多余内容并将其在所有设备上快速设置样式。 我本可以在 div 上递归地使用“display: contents”来获得我想要的结果，但真正的问题是内容是通常的 2006 年风格的 div 汤。
因此，我认为缺少 Subgrid 是一件好事。 它强制执行规范和文档结构，而不是修改现有内容以适应新的闪亮的 CSS Grid。 继承对一些网格声明效果很好，display: contents 也效果很好。
关于样式化间隙和边框内容，我认为它目前的工作方式很棒，巧妙地使用伪元素可以让你走很远。 我曾希望网格间隙意味着永远不再使用 margin 或 padding，遗憾的是，我还没有到达这个应许之地。
这是 CSS 排除，目前仅在 Microsoft Edge 中受支持。 Rachel Andrews 有一篇关于它们的精彩文章在此处。 我们有兴趣将来在 Chromium 中引入它——因此在这里添加您的支持将非常棒此处
为此，您需要排除：https://rachelandrew.co.uk/archives/2018/11/09/editorial-layouts-exclusions-and-css-grid/
我偶然发现了排除，但我知道这在我的当前目标平台上不起作用。 此外，没有 polyfill——我并不相信 polyfill。
所以对我来说，目前的解决方案是换一种思维方式。 而不是在旁边有一个带精美图形的旁注，只需将其放在另一行中，想象每个人都只在使用手机，然后就完成了。
关于：网格轨道作为间隙
也许如果我们可以将网格区域标记为禁用，以便自动放置不会发生在那里，这将很有用？
我的障碍是无法动画化网格单元格。 我已将 Grid 集成为主布局，并使用可重用模式（桌面）来动态创建中心列。https://codepen.io/BRacicot/pen/NBxGwJ
但是，无法以 Subgrid 的方式重用网格毁掉了我的体验，并导致了额外的代码。 在这里，我无法看到使用它的好处。
然后是动画问题。 我认为规范指出 5 个内容应该是可动画的，而浏览器仅集成了 3 个。 grid-template-columns 和 grid-template-rows 不是其中之一……我删除了我的 Grid 策略，打算构建可重用的 Flexbox 布局，实际上它运行得非常出色……
恕我直言，Grid 还没有准备好用于严肃的生产环境。