CSS Grid Areas

I was very intrigued by the animated demos, but apparently the animation is not accomplished with CSS :(

I definitely learned flexbox and thought to myself "this is good enough", and haven't really pushed myself to learn grids. It does seem like there's some reason to prefer grid [0], but it overall I've never needed to do anything that can only be done with grid (except data tables, for which I use actual tables).

[0] https://css-tricks.com/css-grid-replace-flexbox/

Wait, '1/3' isn't a fraction, it's a range from 1 to 3? Why in God's name would they choose that syntax? Ranges have plenty of reasonable, well known syntaxes in programming. E.g. 1..3

I haven't been able to grasp either grid or flexbox. The last layout strategy I was decent at was floats. This article made me feel confident to use a css grid next time I am designing a layout. Well made! Thank you.

Related:

Grid Garden https://cssgridgarden.com

Flexbox Froggy https://flexboxfroggy.com

Is there a pre-intro version of this document? I am lost at the Introduction itself and not able to get past it. In particular:

> If I need to position child items within the grid, I need to specify the line number for each item by using grid-column.

Stuck at what is 'line number' in this context? I tried to force my way through it hoping context would fill it in but immediately got stuck at fractions like '1 / 3' followed by '1 / 4'.

Highly recommended for CSS Grid is Jen Simmons Mondrian with auto flow. https://labs.jensimmons.com/2017/01-011.html. Try 'C' and 'D' then change the window size. Also the youtube video that goes along https://www.youtube.com/watch?v=qNtJ5p3h2A4.

Just very cool.

The one thing about auto flow I wish I understood was how to detect, and fill, gaps. If I have some random collection of differently sized objects, how do I ensure that auto flow leaves no gaps? Or even detect that so I can add something?

I hope that's not a stupid question, but why define the syntax as 1/2 and 3/4 (divider) and not 1-2 (column 1 _to_ column 2) and 3-4 or 1->2 or something like that?

Wow, I just love interactive blog posts like this. For grids I can really recommend just playing around with grid areas in a tool like https://grid.layoutit.com/

I've been using the site to plan my grid layouts for a couple of years now and it just makes spacing so much easier

Might be the first time I've actually understood CSS grid. The numbering really helped!

Great article! Will be referencing it often.

while I love CSS Grid and Areas I still think the hardest part is managing responsiveness especially between mobile and desktop sizes. I find that grid-template-area and the rows / columns sizes needs to be updated via JavaScript based on what UI elements should be open / full screen

I haven’t found a world where minmax or calc fixes this. hope someone has answers!

This is a fantastic article, and highlights both why grid is fantastic, and how its syntax (and, more generally, CSS syntax) is so annoying. Why there must be SO MANY ways to write the same thing?

There are two dimensions, and three parameters each - start, end, size. Then there are at least three ways to declare each parameter. And then... shorthand properties, what a mess.

I always find it very hard to read someone else's grids. No matter how organised the dev is, the lack of an idiomatic way to write means there's always a very high cognitive load for parsing.

things like justify-content, align-content, align-items, align-self confuse me, they change based on block and inline settings and the naming is also too indistinct. in the end i just find it frustrating.

sometimes miss the days of table layouts.

i think flex and grid are fine if you stick to the basics. but when you start having nested elements and things like display: content. things can become unmanageable.

Superb article. Things are so clear. MDN/W3C should hire him to do this for many web concepts.

Supplementary, by a CSS grid expert: https://www.youtube.com/watch?v=EashgVqboWo

What a brilliant blog. Author puts a lot of love in it, that's clear! Thanks for sharing, read the whole thing. Made me feel kinda stupid for not using CSS Grid more... ;-)

Does anyone know why the numbers are the gaps rather than the columns / rows? It's not exactly rocket science, but it took me a while to wrap my head around that, and it would have felt more intuitive for e.g. an item taking up the first two columns to be 1/2 rather than 1/3. I wonder if that's something to do with being used to arrays starting at 0, and if it has to be columns then using 0/2.

Solid article! Important point I didn't see covered / worth noting with grid & flex layouts is visual vs logical tab orders ... Looking forward to a solution in upcoming specs

https://developer.chrome.com/blog/reading-flow-display-conte...

Probably a cliché question at this point but

isn't all of this solved more easily via flexbox?

Would like a tool like the one made for flexbox (to streamline

the process of creating responsive layouts): https://flexboxcss.com

For the invalid example in 3.2, I think the last line intends to say "sidebar" not "header". As it is, it's both discontiguous and missing an area.

The guy fails to mention at the beginning what 1/3, 3/4 means.

The interactive elements of the article made it click for me, the effort is much appreciated!

Oh my God. What we have done ?