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

21–30 of 104 posts

Re: New layouts with CSS Subgrid

#21

Post by lelandfe »

sussmannbaka wrote: post #20
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, readin…

> A layout grid is not a table

Ain't it? Rows and columns get you a table.

Re: New layouts with CSS Subgrid

#22

Post by paulhebert »

masterphai wrote: post #17
moron4hire wrote: post #11

Earlier quoted context omitted.

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

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

Re: New layouts with CSS Subgrid

#23

Post by paulhebert »

echelon wrote: post #6

I am continually in awe of Josh's blog posts, clarity of writing, sense of design, and fun interactive website. You're killing it, Josh. Thank you for writing and teaching us.

Agreed. I’m happy to be on his mailing list. I’m always excited for a new Josh article

Re: New layouts with CSS Subgrid

#24

Post by psygn89 »

taftster wrote: post #19
psygn89 wrote: post #13

Earlier quoted context omitted.

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?

Use for tabular data, but for layout you should use grid. Grid doesn't have it's own element like table does, so you have to use css to apply that display to a div.

CSS takes a bit of time to understand. It's cascading nature and how certain properties behave differently based on the html structure or display type or direction makes it tricky. I don't blame you sticking with tables for layouts for yourself - making layouts with floats was a pain. Bootstrap hid a lot of the layout pain. But today we have flex and grid to help us realize our layouts.

Re: New layouts with CSS Subgrid

#25

Post by paulhebert »

taftster wrote: post #19
psygn89 wrote: post #13

Earlier quoted context omitted.

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?

No. The table is meant to hold tabular data like a spreadsheet. It has special behavior for people who use tools like screen readers because they have vision impairment.

CSS grid is a powerful layout tool. If you think CSS sucks I encourage you to brush up on the newer developments. Flex box and grid and many other newer tools solve a lot of the classic pain points with CSS and make it a pleasure to use if you invest the time to learn it

Re: New layouts with CSS Subgrid

#29

Post by code_biologist »

rckt wrote: post #28

I never found it comfortable to work with grids. The syntax and layout just feel off. Flexbox is a much more flexible and easy thing to work with.

There's plenty of overlap, but they solve different problems: flexbox when the content should control element sizing/fit, grid when the container should control element sizing/fit.
Post reply on HN