What is an alternative to css subgrid?

Question

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;

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?

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

Answer 1

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

From caniuse: (bold mine)

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.

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.

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

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

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) setting the rowWrapper divs with display: contents

.rowWrapper {
  display: contents;
}

Updated Codepen demo

Answer 2

Using display:contents to simulate css subgrid is a hack: hacks add complexity — making the code harder to maintain and prone to other errors — and sooner or later they will stop working.

Beware of using display:contentsas a substitute for subgrid: there are good reasons why it should be avoided. Instead use either another Grid in the container element or Flex.

[Adendum 11/1/2020] Firefox supports Subgrid since V71, no word yet from the other browsers. There is a good explanations about the feature in codrops, and you can see some examples here. And this is the link to see the current support in all of the browsers in can I use