An Interactive Guide to CSS Grid | Hacker News Reader

An Interactive Guide to CSS Grid

joshwcomeau.com

233 pointsamanzi34 comments

I mostly learned CSS grid from an overview of all the properties: https://css-tricks.com/snippets/css/complete-guide-grid/

I developed a fondness for that website because I kept referencing their page for flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Chris Coyier's Guide to Flexbox is one of the most well regarded pages on the modern web!

It's a classic at this point! :-D

Very good, indeed

I learned with examples https://gridbyexample.com/examples/

These days I use named grids most of the time. Named grids are easier to look at than numbers especially coming back to a codebase after a couple of months.

There is finally (since September 2023) support for subgrids in all major browsers. This was a much highly requested feature needed if you cannot put grid cells directly into the container, for example a table where each row is a div that contains the cells. Previously you could not apply widths from the table's grid layout to the individual cells, each row needed its own grid layout. Now grid layout can control grand children of the container.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...

For general web content, I would recommend not depending on subgrid until about next September (at which point Safari will have had it for two years and Chromium for one year). Use it as an enhancement, certainly, but make sure the layout is still at least usable if it’s missing.

This is a great walkthrough!

I love CSS Grid. When you’ve got a design that really needs it, it feels like magic. But truthfully, I so often try to use it but wind up back with flexbox. Or there’s some quirk to a design that just doesn’t work out. Subgrid will make it much more usable (at least as I understand it) and I’m very excited for it to have wider support.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...

Here is my thumb-rule and I hope things haven't changed in the last few years -- Structural Layout in CSS Grid; Content Alignment in Flexbox.

There is something flexbox cant. Center the content columns but align rows with uneven numbers at the start. Unless I'm missing something. I don't want to nest more stuff

1 2 3 4

5 6 7 8

9 10

It’s also worth checking out Grid Garden[1] and its companion Flexbox Froggy[2]

[1] https://cssgridgarden.com/ [2] https://flexboxfroggy.com/

Flexbox froggy got me into learning flexbox and now I find out there's a grid counterpart?!

These things are worth knowing but for all but the simplest layouts, I still use an interactive design tool to generate the layout.

I'm not making excuses for my ignorance —I use grid daily— it's just easier to visualise and label, well, visually.

There are many online grid generators, but I use https://grid.layoutit.com/

Very nice walkthrough. Thank you for the calendar section.

I never need div, wrapper or container. Remnants of the old world. It’s body display:grid and then come the (subgrids) nav header main aside and footer without any class or id obfuscation. :)

Basically, this work like how we use <table> for layout before css was a thing.

Now with the semantic web dead, can't we just use table like the good old days?

Grid is much more powerful than the table.

And accessibility is not dead.

Making the table responsive while there are hardcoded html tags would be hell compared to media queries in css (grid).

In the early days, all you needed is one layout, and seeing the structure of your html tags was intuitive.

Today, you use "table" tags for mainly tables and css for layouts. Separate of concerns?

Not as many viewports to support back then. Look at the hacks we used to get tables to be responsive over a decade ago: https://css-tricks.com/responsive-data-tables/

Using tables was hell compared to Grid. First time I've seen this described as "good."

I am still a novice to grid - in the Assigning Children interactive demo, if you click-and-drag across a row or column, the .child style will always refer to fractions of 1, ⅓, ¼, and ⅕, despite being a 4×4 grid. Can someone confirm whether there's a bug? I'd expect it to rather be 1, ½, ⅓, and ¼.

I am a grid novice too so take this with a grain of salt. I don't think there is a bug, because even though you have a 4x4 grid when you count the lines starting at 1 you can count up to 5 including the last one. A little counterintuitive .. scroll down to the labeled grid right below the demo and it might make more sense.

Ah, that explains it. I'd better give the whole thing a proper read once I'm free.

These are no fractions at all. The „/„ ist just the separator between the start and the end position (counting lines not cells)

So normally you count the lines. On the other hand, I generally use negative numbers to specify the range (eg. `grid-row: 1/-1;` will cover the entire row; `grid-column: 2/-2;` will cover from 2 to the 2nd from last column, inclusive).

This is fantastic!

There a good textbook that covers modern CSS and HTML? Or does the space change frequently enough that most of the best stuff is contained in blogs and articles?

best stuff is tutorial videos on youtube, or online video courses

Hard disagree. CSS is visual, you can pick it up much faster with written guides with code samples.

> CSS is visual

That is why videos are so effective. Would you rather watch a oil painting lesson or a read an book on oil painting?

CSS tutorial channels on youtube have millions of subscribers, there's a reason for that.

For me the best learning resource has been Mozilla Developer's Network (MDN). It serves as an indispensable reference to the language specifications, browser compatibility, as well as plenty of examples and guides.

Learn web development (HTML, CSS, JS) - https://developer.mozilla.org/en-US/docs/Learn

Thank you

I got the book "Modern CSS" and I have found it to be quite good.

Thank you

I posted this but it's actually a dupe of the following, which the author posted:

https://news.ycombinator.com/item?id=38364822

Thanks for reposting, this was a very enlighting explainer!

Reply on news.ycombinator.com