Subgrid is really cool, but I want to note that for the first trivial example, you could make the children participate in grid layout by doing

    ul { display: contents }

it's more efficient, if you don't need subgrid features, but still want the nested element structure for other reasons.

▲ Izkata 6 hours ago | parent | next [-]

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.

▲

5 hours ago | parent | next [-]

[deleted]

▲

bradly 6 hours ago | parent | prev [-]

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.

	▲	b2ccb2 12 minutes ago \| parent [-]
		I'd use <table>. It literally is a table. And for mobile just do a media query to turn it into a flexbox.

▲ moron4hire 5 hours ago | parent | prev [-]

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.

▲

masterphai 5 hours ago | parent [-]

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.

	▲	paulhebert 4 hours ago \| parent [-]
		Yeah this is a good callout. My understanding is that display: contents is not meant to impact the accessibility tree but there is a long and ongoing history of browser bugs that make me not want to use it for elements that have an accessible role