我正在使用非常简单的布局工作 - 基本上是数据表,但使用网格布局,以便根据内容大小很好地调整列。我想让行可排序(使用jQuery),所以我需要找到一种方法来将容器中同一行的所有单元格包装起来。
display: subgrid;
我尝试使用子网格,但目前似乎没有太多支持。显然,只是嵌套网格并不起作用,因为它不会同步列大小在不同的网格之间..
关于如何实现这一点的任何想法?
到目前为止,这是我的笔:https://codepen.io/anon/pen/PEjqgx
答案 0 :(得分:11)
根据具体情况,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;
}
答案 1 :(得分:1)
谨防使用display:contents
替代子网格:there are good reasons why it should be avoided。而是使用holder元素中的另一个Grid或Flex