CSS子网格的替代方案是什么？

Question

我正在制作一个布局非常简单的页面 - 基本上是一个数据表格，但使用网格布局，这样列的大小会根据内容自动调整。我想要对行进行排序（使用jQuery），所以我需要找到一种方法将同一行中所有单元格包装在容器中。

display: subgrid;

我已经尝试使用子网格，但目前似乎支持不太好。显然，仅嵌套网格是无法在不同网格之间同步列大小的。

你有任何想法吗？

这是目前我的笔记本电脑：https://codepen.io/anon/pen/PEjqgx

- Buno

---

相关链接：https://dev59.com/j1YN5IYBdhLWcg3w1LMG - Danield

相关：在主容器中定位网格项的内容（子网格功能） - Michael Benjamin

https://rachelandrew.co.uk/archives/2017/03/16/subgrid-moved-to-level-2-of-the-css-grid-specification/ - chharvey

Chrome计划在v117版本中发布子网格（可能还需要几个月）：https://chromestatus.com/feature/5663795354533888 - bjg222

Answer 1

根据上下文，display: contents 可能是 display: subgrid 的可行解决方法。

根据Caniuse的说明：（加粗为重点） display: contents 会导致元素的子元素显示为它们直接是父元素的子元素，忽略了元素本身。当使用 CSS grid 或类似的布局技术时，这可以在包装器元素应该被忽略时很有用。 这里的一个重大胜利是我们可以保持当前的标记 - 将每行数据组合在一起 - 同时仍然使每行的组件在一起同步，因为它们是一个 CSS 网格 - 网格容器的一部分。

关于浏览器支持：Chrome、Firefox和iOS 11.4+ 支持 display: contents。

所以回到 OP 的 Codepen 示例，我们可以利用 display: contents 来实现期望的结果：

1）将网格容器属性移动到 globalWrapper div 中；

#globalWrapper {
  display: grid;
  grid-template-columns: 1fr 1fr max-content;
  grid-gap: 3px;
}

2) 设置rowWrapper div的display: contents

.rowWrapper {
  display: contents;
}

更新的 Codepen 演示

- Danield

---

谢谢！但据我所知，这只适用于火狐浏览器，对吗？ - Buno

@Buno 正确，但 Chrome 也在旗帜后面支持此功能。我猜 display: contents 的支持会比 display: subgrid 更快得到改善……但你永远不知道 :) - Danield

谢谢Danield！这是我的“display: contents”实验：https://jsfiddle.net/koldev/Lxfyghz6/ -- 这是一个居中的单列设计，列宽由哪个更宽决定，标题还是页面内容。这是通过将两者放入网格中实现的。由于子元素决定宽度，我会使用子网格，直到支持为止，我使用“display: contents”解决了问题。 - kol

哥们儿，天啊，太感谢了。我正在阅读有关子网格的内容，不知道为什么它们还没有被使用，我都快放弃了。这正是我所需要的。谢谢 :) - carinlynchin

Answer 2

使用display:contents来模拟CSS子网格是一种hack：hack会增加复杂性，使代码更难维护并容易出现其他错误，并且迟早会停止工作。

谨慎使用display:contents作为子网格的替代品：有很多理由不建议使用它。相反，可以在容器元素中使用另一个网格或Flex布局。 [补充 11/1/2020] Firefox从V71开始支持Subgrid，其他浏览器尚未公布消息。在codrops上有关于该功能的很好解释，你还可以在这里看到一些示例。这是链接查看所有浏览器当前支持情况的can I use页面。

[附录 06/06/2022] 苹果宣布 Safari 16 支持子网格

[附录 05/25/2023] display: contents 被认为是有害的

[附录 08/17/2023] 它越来越近了：Chrome 117 Beta 支持子网格，这是 Rachel Andrews 最新更新的一篇关于 CSS 子网格如何工作 的文章

- ganar

---

它并不能替代子网格的使用情况，但它有其用途，不应该被避免。 - thinsoldier

@thinsoldier，带链接的答案很清楚。对评论的更正是否足够好？ - ganar

这是一个"仅有链接"的回答。您应该扩展您的回答，包括尽可能多的信息在这里，并仅将链接用于参考。 - jhpratt

@jhpratt 感谢您的评论：Rachel Andrew 的回答很棒，她页面上展示的测试非常准确，我喜欢指向她的工作并认可她的作者身份。此外，我想补充一点，使用 display:contents 来_模拟_ css 子网格是一种 hack：hack 会增加复杂性——使代码更难维护且容易出现其他错误——而且迟早会停止工作。 - ganar