css - 什么是 css 子网格的替代品？

Question

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

display: subgrid;

我试过使用 subgrid，但目前似乎没有太多支持。显然，仅仅嵌套一个网格是行不通的，因为它不会同步不同网格之间的列大小。

关于如何实现这一点有什么想法吗？

到目前为止，这是我的笔:https://codepen.io/anon/pen/PEjqgx

Answer 1

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

来自 caniuse : (大胆的矿山)

display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques.

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

关于 browser support : display: contents 受 Chrome、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) 使用 display: contents 设置 rowWrapper div

.rowWrapper {
  display: contents;
}

Updated Codepen demo