Live data from Hacker News

New layouts with CSS Subgrid

joshwcomeau.com

31–40 of 104 posts

Re: New layouts with CSS Subgrid

#31

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.

It's quite straightforward to find the discussions that lead to the specs, if you're interested in participating.

Re: New layouts with CSS Subgrid

#32
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.

Another way to think about it: flexbox is for alignment of boxes in one dimension: horizontally or vertically.

CSS Grid is for two dimensional layout of rows and columns.

Back in the day, developers wanted page layout instead of the hacks on top of hacks with table-based layouts, floats and positioning to create layouts.

We’ve had CSS Grid designed for page layout on the web, in all browsers since 2017; as of 2022, only 12% of the top 1 million websites used CSS Grid, which to me is ridiculously low.

Re: New layouts with CSS Subgrid

#33

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.

Yes, the syntax takes a while to get used to; they were attempting to cover several different use cases.

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...

Re: New layouts with CSS Subgrid

#34

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.

Layout Land [1] is a great set of videos that explains CSS Grid

[1]: https://m.youtube.com/layoutland

Re: New layouts with CSS Subgrid

#35
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.

I agree. I occasionally turn to them to see if they work in a new setting, but find they never expose the features of a grid I would find useful. Everything must be manually placed, rather than allowing content to intelligently snap to multiple axes. Possibly I never have grasped some fundamental concept, possibly they are not suited to the sorts of layouts I usually work on. But more and more I feel they are designed to fulfil some purpose orthogonal to what I would need them to do.

Re: New layouts with CSS Subgrid

#36
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.

Screen readers do care. A lot. Grid and subgrid solve the problem without breaking DOM and semantics, which is a huge concern in accessibility.

Re: New layouts with CSS Subgrid

#38
post #14

Have we wrapped all the way around to layouts again?

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.

Re: New layouts with CSS Subgrid

#40
Random grid gotcha that drove me crazy some time ago: due to browser bugs we can't use 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 ' 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).
Post reply on HN