什么是css subgrid的替代品？

Question

我正在使用一个非常简单的布局的页面 - 基本上是一个数据表,但使用网格布局,以便列将根据内容大小很好地调整.我想使行可排序(使用jQuery),所以我需要找到一种方法来包装容器中同一行的所有单元格.

display: subgrid;

我尝试过使用subgrid,但目前似乎没有太多支持..显然,只是嵌套网格不起作用,因为它不会同步不同网格之间的列大小.

有关如何实现这一点的任何想法？

Answer 1

根据具体情况,display: contents可能是一个可行的解决方法display: subgrid.

来自caniuse :(大胆的我的)

display: contents导致元素的子元素看起来好像是元素父元素的直接子元素,忽略元素本身.当使用CSS网格或类似布局技术时应忽略包装元素时,这可能很有用.

这里的最大胜利是我们可以保留当前的标记 - 将每行数据组合在一起 - 同时保持每行的组件同步,因为它们只是一个CSS网格的一部分 - 网格容器.

关于浏览器支持:display: contentsChrome,Firefox和iOS 11.4+支持.

因此,回到OP的示例Codepen,我们可以通过以下方式利用display: contents实现所需的结果:

1)将网格容器属性移动到globalWrapper div和

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

2)设置rowWrapper divs display: contents

.rowWrapper {
  display: contents;
}

更新了Codepen演示

@Buno正确,但Chrome也支持这个标志.我猜测对`display:contents`的支持会在`display:subgrid`得到支持之前很久就会得到改善....但是你什么都不知道:) (3认同)

Answer 2

使用display:contents模拟CSS子网格是一种黑客行为：黑客行为增加了复杂性\xe2\x80\x94，使代码更难维护，并且容易出现其他错误\xe2\x80\x94，迟早它们会停止工作。

\n

小心使用display:contents作为子网格的替代品：有充分的理由说明为什么应该避免它。而是使用容器元素中的另一个 Grid 或 Flex。

\n

[附录 11/1/2020] Firefox 从 V71 开始支持 Subgrid，其他浏览器还没有任何消息。codrops 中有关于该功能的很好的解释，您可以在这里查看一些示例。这是查看我可以使用的所有浏览器当前支持的链接

\n

[附录 06/06/2022] Apple 宣布对 Safari 16 提供子网格支持

\n

[附录 05/25/2023] 显示：被认为有害的内容

\n

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

\n

这是一个边界[仅链接答案](//meta.stackexchange.com/q/8231)。您应该扩展您的答案以在此处包含尽可能多的信息，并仅使用该链接作为参考。 (5认同)