什么是css subgrid的替代品?

时间:2018-01-01 15:37:03

标签: css css3 grid-layout css-grid

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

display: subgrid;

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

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

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

2 个答案:

答案 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;
}

Updated Codepen demo

答案 1 :(得分:1)

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