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.
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.
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
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. :)
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.
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.
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.
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).
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?
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.
35 comments
[ 2.4 ms ] story [ 94.9 ms ] threadhttps://news.ycombinator.com/item?id=38364822
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/
It's a classic at this point! :-D
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.
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...
1 2 3 4
5 6 7 8
9 10
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. :)
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...
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.
Learn web development (HTML, CSS, JS) - https://developer.mozilla.org/en-US/docs/Learn
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/
Now with the semantic web dead, can't we just use table like the good old days?
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?
Using tables was hell compared to Grid. First time I've seen this described as "good."
[1] https://cssgridgarden.com/ [2] https://flexboxfroggy.com/