Yes, for that specific example it works. But in general, this essentially deletes the UL from the layout entirely. It won't be stylable[0] and it won't dispatch UI events that occur on it specifically.
One example of a reason you might want such an element to still participate in layout is to use that element as an area highlighter. Or you might make it a scrollable section; subgrid makes sticky-header tables rather trivial to implement now.
[0] Well, I can't remember right now if it's unstylable or if its height just ends up zero, but either way, it might not be what you expect.
Yeah, though I find in practice I use `display: contents` far more than I do subgrid. Contents effectively deletes the node for layout purposes, but it still participates in the CSS cascade so you can use it in selectors, even `:hover` works when a child gets hovered, or use it as the origin for inheritable properties.
One subtle thing worth adding is that display: contents also changes how accessibility trees are constructed. The element is removed from the visual layout and from the accessibility tree in many browsers, so semantics like list grouping, landmarks, or ARIA roles can disappear unless you re-introduce them manually.
That’s why subgrid ends up filling a different niche: you preserve the DOM structure, preserve accessibility semantics, and still let the children participate in the parent’s track sizing. It costs more than contents, but it avoids a lot of the accidental side-effects that show up once you start mixing layout, semantics, and interactivity.
And on the second one, you could use any other unit instead of fr for the image to set its width consistently, then fr on the text to have it use up whatever remains.
I also wasn't understanding the value looking at the first two examples, but the pricing packages example I do think I would struggle to implement in a clean way using traditional css.
The pricing UI example is exactly the type of thing I had to build a few years ago. Deceptively simple, two tables for comparison, but the rows need to line up.
Impossible without subgrid, either you need to have fixed heights or calculate heights with JS, but neither is elegant or simple, especially if you have react components and adhere to modular design, and you need to have those components agree on sizing.
Isn't this also what container queries solve better? I guess maybe you want to be sure that the whole grid remains consistent instead of relying on individual containers possibly making their own decisions. So many new features to investigate, so little time :) https://codepen.io/web-dot-dev/pen/rNrbPQw
Container queries don't solve the responsive to sibling sizes issue that grid/flex can solve. And frustratingly container queries force your container element to be a new stacking context, unlike flex/grid.
I am sad that using containers and subgrids together doesn't work. Being able to query the size of the subgrid from a child element would be super powerful.
Yes and no. <table> layouts were a hack that solved a real problem but came with massive downsides. People didn’t tell you to not use <table> to lay out content because grids are bad (they are quite handy! take a look at Grid Systems by Josef Müller-Brockmann) but because <table> both posed technical and accessibility problems. A layout grid is not a table (or a <table
>). A table (with and without <>) comes with attached semantics, hierarchy, reading direction etc. and is extremely rigid, which makes it a bad fit for differing screen sizes.
It’s true that this was a blind spot for a long time and that it was frustrating to not be able to efficiently lay out content in 2D when <table> was just there. But it was the wrong choice then as it is now and it has been baseline available for 8 years now. I hope it won’t take another 8 years until the comparison stops :o)
Yes. I built layouts like this with automatic server-rendered tables 25 years ago, and they just worked with very little effort.
Tables weren't responsive or accessible or any of the other things we now recognize as essential, but it has certainly taken a long time to reinvent the table wheel. And all the while we've had to listen to people screaming in our ears that tables were bad, while also listening to them argue about which of their incredibly difficult and patently subpar "solutions" we were supposed to use instead.
I agree. I got really tired of hearing tables are for tabular data! For 20+ years. My reply was always, Who cares if it accomplished the layout you want. If the meaning of a word is what got people so hung up... why not go and make a new css term that did what tables did but improve on it. Now 20+ years later, that is pretty much what they did.
Random grid gotcha that drove me crazy some time ago: due to browser bugs we can't use <img> elements with percentage widths or heights as grid items. The grid cell dimensions get blown out to the ones of the original image. Seen in both Firefox and Chromium. Relevant FF bug is probably https://bugzilla.mozilla.org/show_bug.cgi?id=1857365 '<img> grid item with percentage height, "width: auto", "grid-template-columns: auto", and no track stretching makes column to have the same width of the original image's width' (although someone there claims it works in Chromium).
This sounds useful, but the example of the feature rows reminds me how sad it is that CSS sometimes requires adding information about the document structure to make a layout work. In this case the number of rows.
Ideally, we would have a way to align elements even when they don't share a parent. Or maybe a flex container that can have its layout mimic another flex container so the distribution in them can line up. It seems that there are a lot of heuristics and edge cases though to keep a simple DX.
When I see the grid syntax, I just wanna jump off a cliff. Who created this abomination and why? We need trials to check whether these were the output of humans or some synthetics pretending to be humans.
Why does it need explaining, when it has to be self explaining and not some overcomplicated mishmash. Like someone was under the influence of psychedelics when working out the specifics.
We had to wait 15 years for proper positioning in css. Same shit repeated again.
So it went thru multiple people and they all said in unison: well, this is all ironed out, easy to use and looks ok. We did a great job!
Just mind boggling. I get it, maybe they want to create extra jobs, by adding complexity, hence more people are required for a role, but why keeping up the illusion? Fucking alter the economic systems if this was the goal.
I think Flexbox is so much worse than CSS Grid. If Flexbox makes sense to you, it I don't think it should be that hard to learn CSS Grid, you'll already have many of the properties you need to understood learned. Grid just works properly in 2 whole dimensions where Flexbox sort of gives up after 1 and a half dimensions.
I sympathize with your comment and imagine the overflowing downvotes as soon you openly critic the web/css/javascript and their people doing the standard. I watched tons of videos and read a lot on mdn about css grid, I don't touch it for a while I need to go back at it again... After tables/floats/abs positioning eventually convoluted flex we should have stopped and review what the heck people were doing on w3c, it's artificial complexity we don't deserve that
Readit News
One example of a reason you might want such an element to still participate in layout is to use that element as an area highlighter. Or you might make it a scrollable section; subgrid makes sticky-header tables rather trivial to implement now.
[0] Well, I can't remember right now if it's unstylable or if its height just ends up zero, but either way, it might not be what you expect.
That’s why subgrid ends up filling a different niche: you preserve the DOM structure, preserve accessibility semantics, and still let the children participate in the parent’s track sizing. It costs more than contents, but it avoids a lot of the accidental side-effects that show up once you start mixing layout, semantics, and interactivity.
Deleted Comment
Impossible without subgrid, either you need to have fixed heights or calculate heights with JS, but neither is elegant or simple, especially if you have react components and adhere to modular design, and you need to have those components agree on sizing.
You're killing it, Josh. Thank you for writing and teaching us.
I am sad that using containers and subgrids together doesn't work. Being able to query the size of the subgrid from a child element would be super powerful.
It’s true that this was a blind spot for a long time and that it was frustrating to not be able to efficiently lay out content in 2D when <table> was just there. But it was the wrong choice then as it is now and it has been baseline available for 8 years now. I hope it won’t take another 8 years until the comparison stops :o)
Ain't it? Rows and columns get you a table.
Tables weren't responsive or accessible or any of the other things we now recognize as essential, but it has certainly taken a long time to reinvent the table wheel. And all the while we've had to listen to people screaming in our ears that tables were bad, while also listening to them argue about which of their incredibly difficult and patently subpar "solutions" we were supposed to use instead.
I'm just confused by the "original image's width".
> "<img> elements with percentage widths or heights"
You can use ASCII art to “draw” your layout if you want to, which is quite accessible [1].
[1]: “Grid: how grid-template-areas offer a visual solution for your code” — https://webkit.org/blog/17620/grid-how-grid-template-areas-o...
[1]: https://m.youtube.com/layoutland
We had to wait 15 years for proper positioning in css. Same shit repeated again.
Just mind boggling. I get it, maybe they want to create extra jobs, by adding complexity, hence more people are required for a role, but why keeping up the illusion? Fucking alter the economic systems if this was the goal.