我正在使用一个非常简单的布局的页面 – 基本上是一个数据表,但使用网格布局,以便列将根据内容大小很好地调整.我想让行可排序(使用jQuery),所以我需要找到一种方法来包装容器中同一行的所有单元格.
@H_301_2@display: subgrid;
我已经尝试过使用subgrid,但目前似乎没有太多支持..显然,只是嵌套网格不起作用,因为它不会同步不同网格之间的列大小.
有关如何实现这一点的任何想法？
到目前为止,这是我的笔：https://codepen.io/anon/pen/PEjqgx
解决方法
根据上下文,
display: contents可能是显示的可行解决方法：subgrid.
从caniuse开始:(大胆的)
display: contentscauses 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用于显示：内容仅限于firefox和Chrome背后的标志.
关于您的示例Codepen,看起来我们可以使用display：contents来实现您想要的内容：
1)将网格容器属性移动到globalWrapper div和
@H_301_2@#globalWrapper { display: grid; grid-template-columns: 1fr 1fr max-content; grid-gap: 3px; }2)使用display：contents设置rowWrapper div
@H_301_2@.rowWrapper { display: contents; }Updated Codepen demo(用firefox查看)
