5 ms·
An Interactive Guide to CSS Grid
- punkybr3wster 3y agoThis is fantastic!
- amanzi 3y agoI posted this but it's actually a dupe of the following, which the author posted: https://news.ycombinator.com/item?id=38364822 https://news.ycombinator.com/item?id=38364822
- deleted 3y ago[deleted]
- jesperwe 3y agoThanks for reposting, this was a very enlighting explainer!
- nayuki 3y agoI mostly learned CSS grid from an overview of all the properties: https://css-tricks.com/snippets/css/complete-guide-grid/ 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/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- firecall 3y agoChris 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
- begueradj 3y agoVery good, indeed
- ThatMedicIsASpy 3y agoI learned with examples https://gridbyexample.com/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.
- sickcodebruh 3y agoThis 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_layout/Subgrid https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...
- Brajeshwar 3y agoHere 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.
- ThatMedicIsASpy 3y agoThere 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
- mediumsmart 3y agoVery 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. :)
- jansan 3y agoThere 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_layout/Subgrid https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...
- chrismorgan 3y agoFor 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.
- LinguaBrowse 3y agoI 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 ¼.
- eternalplatypus 3y agoI 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.
- LinguaBrowse 3y agoAh, that explains it. I'd better give the whole thing a proper read once I'm free.
- laszlokorte 3y agoThese are no fractions at all. The „/„ ist just the separator between the start and the end position (counting lines not cells)
- zamubafoo 3y agoSo 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).
- truculent 3y agoThere 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?
- KevinMS 3y agobest stuff is tutorial videos on youtube, or online video courses
- rchaud 3y agoHard disagree. CSS is visual, you can pick it up much faster with written guides with code samples.
- KevinMS 3y ago> 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.
- lioeters 3y agoFor 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 https://developer.mozilla.org/en-US/docs/Learn
- truculent 3y agoThank you
- fzzzy 3y agoI got the book "Modern CSS" and I have found it to be quite good.
- oliwarner 3y agoThese 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/ https://grid.layoutit.com/
- j16sdiz 3y agoBasically, 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?
- Gare 3y agoGrid is much more powerful than the table.
- Vinnl 3y agoAnd accessibility is not dead.
- just-tom 3y agoMaking 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?
- cantSpellSober 3y agoNot 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/ https://css-tricks.com/responsive-data-tables/ Using tables was hell compared to Grid. First time I've seen this described as "good."
- pez_dev 3y agoIt’s also worth checking out Grid Garden[1] and its companion Flexbox Froggy[2] [1] https://cssgridgarden.com/ https://cssgridgarden.com/ [2] https://flexboxfroggy.com/ https://flexboxfroggy.com/
- justech 3y agoFlexbox froggy got me into learning flexbox and now I find out there's a grid counterpart?!