什么是css subgrid的替代品? [英] What is an alternative to css subgrid?

问题描述

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

I'm working on a page with a pretty simple layout - basically a data table, but using grid layout so that the columns will adjust nicely depending on content size. I want to make the rows sortable (using jQuery), so I need to find a way to wrap all the cells of a same row in a container.

display: subgrid;

我已经尝试过使用subgrid，但是目前似乎还不支持它.显然，嵌套一个网格是行不通的，因为它不会在不同网格之间同步列大小.

I've tried using subgrid but it seems it's not much supported at the moment.. Obviously, just nesting a grid doesn't work as it won't sync the column sizes between different grids..

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

Any idea on how to achieve that?

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

Here is my pen so far: https://codepen.io/anon/pen/PEjqgx

推荐答案

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

Depending on the context, display: contents may be a viable workaround for display: subgrid.

来自 caniuse :(粗体)

display: contents使元素的子代看起来像 是元素父级的直接子级，而忽略了该元素 本身. 当应该忽略包装元素时，这很有用 使用CSS网格或类似的布局技术时.

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网格(网格容器)的一部分.

The big win here is that we can keep our current markup - which groups together each row of data - while keeping components of each row synced together because they are part of just one CSS grid - the grid container.

关于浏览器支持:Chrome，Firefox和iOS支持display: contents 11.4 +.

Regarding browser support: display: contents is supported by Chrome, Firefox and iOS 11.4+.

因此，回到OP的示例Codepen，我们可以使用display: contents通过以下方式实现所需的结果:

So getting back to the OP's sample Codepen, we can make use of display: contents to implement the desired result by:

1)将网格容器属性移动到globalWrapper div和

1) Moving the grid container properties to the globalWrapper div and

#globalWrapper {
  display: grid;
  grid-template-columns: 1fr 1fr max-content;
  grid-gap: 3px;
}

2)使用display: contents

.rowWrapper {
  display: contents;
}

这篇关于什么是css subgrid的替代品?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！