What is an alternative to css subgrid?

Question

I am working on a page with a fairly simple layout - basically a data table, but using a grid layout so that the columns are fine-tuned depending on the size of the content. I want the rows to be sorted (using jQuery), so I need to find a way to wrap all the cells in the same row in the container.

display: subgrid; 

I tried using subgrid, but it seems that it is not very supported at the moment. Obviously, just nesting the grid does not work, because it will not synchronize the column sizes between different grids.

Any idea on how to achieve this?

Here is my pen: 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 mines)

display: contents causes the children to appear as if they were direct children of the parent element, ignoring the element itself. This can be useful when a wrapper element should be ignored when using a CSS grid or similar layout methods.

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

Currently, browser support for display: contents limited to firefox and Chrome beyond the flag.

As for your Codepen sample, it looks like we can use display: contents to implement what you wanted:

1) Moving the properties of the grid container in the globalWrapper div and

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

2) setting divWrapper line with display: contents

 .rowWrapper { display: contents; } 

Updated Codepen Demo (View with firefox)