Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

New layouts with CSS Subgrid

joshwcomeau.com

Post reply on HN
Print view View original

11–20 of 104 posts

Re: New layouts with CSS Subgrid

#11

Post by moron4hire »

webstrand wrote: post #3

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.

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.

Re: New layouts with CSS Subgrid

#13

Post by psygn89 »

SquareWheel wrote: post #10
t1234s wrote: post #9

is grid intended to replace flex at some point or live side by side

They're complimentary. As a general (though not exclusive) rule, consider flex for one-dimensional layouts, and grids for two-dimensional layouts.

Yeah, to expand on that... Flex is, well, flexible, whereas Grid is more rigid like a table. The rigidity of Grid allows you to span rows and columns (2D) just like you can with table cells (colspan/rowspan). Grid is usually used at a macro level for its more deterministic layout (no unintuitive flex quirks), while flex is usually used to lay things out at a component level where you don't care that the next row of items isn't perfectly aligned with the ones above (you will often see it hold some buttons or badges, or vertically align text to an icon), and Grid setting the layout of the app and container components (modals, cards, etc).

Re: New layouts with CSS Subgrid

#15

Post by [deleted] »

Izkata wrote: post #4
webstrand wrote: post #3

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.

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.

[deleted]

Re: New layouts with CSS Subgrid

#17

Post by masterphai »

moron4hire wrote: post #11
webstrand wrote: post #3

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.

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…

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.

Re: New layouts with CSS Subgrid

#18

Post by hackthemack »

N_Lens wrote: post #14

Have we wrapped all the way around to layouts again?

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.

Re: New layouts with CSS Subgrid

#19

Post by taftster »

psygn89 wrote: post #13
SquareWheel wrote: post #10

Earlier quoted context omitted.

They're complimentary. As a general (though not exclusive) rule, consider flex for one-dimensional layouts, and grids for two-dimensional layouts.

Yeah, to expand on that... Flex is, well, flexible, whereas Grid is more rigid like a table. The rigidity of Grid allows you to span rows and columns (2D) just like you can with table cells (colspan/rowspan). Grid is usually used at a macro level for its more deterministic layout (no unintuitive flex quirks), while flex is usually used to lay things out at a component level where you don't care that the next row of i…

So is Grid supposed to be what we should use to replace the html element? That I still use to this day for layouts because CSS still sucks to me?

Re: New layouts with CSS Subgrid

#20

Post by sussmannbaka »

N_Lens wrote: post #14

Have we wrapped all the way around to layouts again?

Yes and no. layouts were a hack that solved a real problem but came with massive downsides. People didn’t tell you to not use 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 both posed technical and accessibility problems. A layout grid is not a table (or a ). 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 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)

Post reply on HN