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

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 holder element or Flex