什么是css subgrid的替代品？

Question

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

display: subgrid;

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

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

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

Answer 1

根据具体情况，display: contents可能是display: subgrid的可行解决方法。

来自caniuse :(大胆的我的）

  

display: contents会导致元素的子项显示为好像   是元素父母的直接孩子，忽略了元素   本身。 当应该忽略包装元素时，这可能很有用   使用CSS网格或类似的布局技术。

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

关于browser support：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;
}

Updated Codepen demo

Answer 2

谨防使用display:contents替代子网格：there are good reasons why it should be avoided。而是使用holder元素中的另一个Grid或Flex