27

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

j08691
  • 204,283
  • 31
  • 260
  • 272
Buno
  • 597
  • 1
  • 9
  • 20
  • related: https://stackoverflow.com/questions/46816752/equal-height-of-elements-inside-grid-item-with-css-grid-layout – Danield Jan 01 '18 at 15:44
  • related: [Positioning content of grid items in primary container (subgrid feature)](https://stackoverflow.com/q/47929369/3597276) – Michael Benjamin Jan 04 '18 at 15:06
  • https://rachelandrew.co.uk/archives/2017/03/16/subgrid-moved-to-level-2-of-the-css-grid-specification/ – chharvey Mar 14 '18 at 04:40
  • Chrome intends to release subgrid in v117 (maybe a few months away): https://chromestatus.com/feature/5663795354533888 – bjg222 Jul 13 '23 at 02:36

2 Answers2

45

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

Danield
  • 121,619
  • 37
  • 226
  • 255
  • Thanks! This will only work for firefox though from what I understand, right? – Buno Jan 02 '18 at 10:21
  • 3
    @Buno Correct, however Chrome also supports this behind a flag. I'm guessing that support for `display: contents` will improve long before `display: subgrid` will be supported.... but y'never know :) – Danield Jan 02 '18 at 10:27
  • Thank you Danield! Here is my experiment with "display: contents": https://jsfiddle.net/koldev/Lxfyghz6/ -- It's a centered one-column design where the column width is determined by which one is wider, the header or the page content. This is achieved by putting both into a grid. Since subelements determine the widths, I'd use subgrids, until it's supported I solved the problem using "display: contents". – kol Apr 05 '22 at 07:29
  • dude.. omg thank you so much. I'm sitting here reading about subgrids and wondering why they are still not being used and I was about to give up. This is exactly what I needed. Thank you :) – carinlynchin Feb 03 '23 at 04:12
7

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

[Adendum 06/06/2022] Apple announces subgrid support for Safari 16

[Adendum 05/25/2023] display: contents considered harmful

[Adendum 08/17/2023] It is getting closer: Chrome 117 Beta supports Subgrid, here's a recent updated article by Rachel Andrews on how CSS Subgrid works

ganar
  • 627
  • 8
  • 17
  • It is not a substitute for the use cases of subgrid but it has its uses and should not be avoided. – thinsoldier May 26 '18 at 00:14
  • @thinsoldier the answer with the link is clear. Is the correction to the comment good enough? – ganar May 27 '18 at 20:01
  • 5
    This is a borderline [link-only answer](//meta.stackexchange.com/q/8231). You should expand your answer to include as much information here, and use the link only for reference. – jhpratt Nov 08 '18 at 03:46
  • @jhpratt thanks for you comment: Rachel Andrew's answer is great, and the tests displayed on her page are spot-on, I like to point to her work and recognize her authorship. To that I would add that 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. – ganar Nov 09 '18 at 19:35