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 t

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 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