CSS Grid Areas

The last layout strategy I was decent at was <table>, so you should be fine.

If you managed to understand floats (a rare feat) you'll have a blast with flex / grid :)

If you were there with floats, Grid and Flex will be a walk in the park for you. Give it a day or two and try out a few layouts. And unlike the struggles with browsers, these two seems to just work. In-fact, they are kinda boring.

There are a lot of articles, some really good but I read through two of CSS-tricks articles and that is all there is.

- https://css-tricks.com/snippets/css/a-guide-to-flexbox/

- https://css-tricks.com/snippets/css/complete-guide-grid/

Grid has a lot of features but flex is simple enough and still very powerful

I think you can get away without learning grids, but flexbox is a must - given its convenience over the old “float-hacks” and its omnipresence in modern CSS.

Besides the already mentioned css-tricks articles, I recommend checking out the guide to flexbox from mdn[1] (in the side menu there is also one for grids) as well as the reference to “CSS flexible box layout”[2]. These helped me get a deeper understanding about the concepts behind flexbox and how the properties and their shorthands actually work.

[1]: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...

[2]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexibl...

I feel like flexbox is the float grid system done right, and you can lay out children either vertically or horizontally, whereas floats with the clearfix hack were only laid out as rows. But it's still mostly one-dimensional with possible wrapping, so the trick is to nest and stack. With grids it's different, a grid has a template and then the direct children occupy those predefined areas, which is more static than flexbox and the grid doesn't affect other nested elements, which is a limitation, but subgrid should change that.

Flexbox -> 1-dimensional layouts

Grid -> 2-dimensional layouts

That being said, I use Flexbox for pretty much everything.

Kevin Powell has a few great videos on YT comparing flexbox to grid. Grid can be very powerful if you want overlapping grid areas. Something that was previously only possible using absolute positioning. Also, auto-fit and auto-fill

not at all, the wet dream of css is to be able to layout just with css and only semantic markup, to which flexbox falls short sometimes because you need to add non-semantic elements (columns and rows).

The main reason I tend to reach for grid is responsiveness. Makes it way easier to change the layout at different screen sizes.

One thing flex cannot do well is white space: how do you leave a gap of content without spacer divs?

This becomes more complicated when the number of divs is dynamic as flex determines position based on siblings. With grid you already have defined the “layout”, and you are just placing the div into the correct position.

Grid does that in both axis too. So although you may be able to kind of replicate the 1d version with flex, it becomes much harder to align in 2D.

I wrote an article about this: https://cssprinciples.com/3/grid/

I typically look at grid as the outermost container. It is very good at dealing with coarse layout concerns because you can constrain on both dimensions and define a layout per media query (or whatever).

I've never been in a situation where nesting grids makes sense. Nesting flexbox obviates the need for grid in most cases.

The very first thing you need to know about CSS is that it uses the language of print layout, not programming.

A lot of the problems programmers seem to have with CSS probably stem from this misapprehension.

Imagine telling a programmer that in CSS - !important means "important!", not "not important" :-)

While I like grid functionality, the syntax is really different from lot of other CSS, and it's confusing imho. It's like this corner where you can see they either developed it in isolation or felt they were "going to do it right this time" or something.

I was surprised to not see the author call out how amazing template areas are for responsiveness. Using media queries lets you define different grid areas for different screens and then your elements can be moved to whatever layout you'd like for that screen size. If you need to hide an element at a certain size just give it display: none at that size.

Here's a very simple example: https://codepen.io/trescenzi/pen/vYqpjvL.

Have you tried media queries?

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

I believe that many such cases can be solved by using :had() and/or subgrids, but I do not have too much experience in this

The way to go with this is to still use a grid, but make the row/col values be css variables ( "var(--foo)" ) instead of fixed values.

Then you can update the value of just that variable from JS, and the grid will reflect it.

That's great that you've learned a tool that covers all your needs.

I've only used grid for responsive image galleries like https://labs.jensimmons.com/2016/examples/image-gallery-grid... or responsive cards like https://every-layout.dev/demos/grid-cards/. `grid-template-columns` is good to learn. `grid-gap` is convenient. Flexbox seems to handle everything else.

But I'm still iffy about grid template areas. The article makes a case for easily adjusting layouts per breakpoint, or "for team members who might need to change a layout." Maybe I'm just not the target audience.

Flex is good enough for most things, but grid has its place. Responsive grids (think of those 3 column card layouts that shrink to a single card per row layout on small screens), page layouts like dedicated sidebar areas, resizable elements that should stick to a certain layout despite the resize, etc.

Nothing stopping you from using both as necessary, combined it's a very strong layout tool

"No, Flexbox isn't "good enough" https://www.youtube.com/watch?v=MWWcZzossc8

A fun tool for grid learning: https://cssgridgarden.com/

In Chrome DevTools, I just enter the required value (center/end) and scroll through the suggested properties until the desired effect is achieved. No need to remember them.

The naming is super annoying, but for Grid it is least a consistent mapping:

- align-* is inline axis.

- justify-* is block axis.

- *-content is aligning grid tracks (rows/columns).

- *-items is aligning individual children within their grid area.

The column number can be negative. 1--1 vs 1->-1 vs 1/-1 ?

We've handed visual layout markup to a bunch of software engineers who don't then consider that this should not be an engineering "language" when adding new features, which pushes closer to the hands of day to day engineers who then try and solve problems that shouldn't exist like portability and reusability. So we end up with a mishmash of nonsense that is neither simple enough for the intended user case nor smart enough to be able to be shifted to a higher level of engineering skill.

Fixed CSS layout?

If you scroll down just a bit, the article provides a live demo so you can play with the system and see what’s happening.

The “line numbers” (not a great name) are the column edges. So 1/3 goes from edge 1 (the left-most) to edge 3, spanning 2 full columns.

Line numbers are the dividing lines between columns. If you have 2 columns you’ll have 3 lines: |a||b| the two lines in the middle actually count as 1. Hence 3 lines. So 1/3 is not a fraction its column span. It means “start at line 1 and end at line 3”.

You can make those numbers show up natively in Firefox too using the developer tools. (Not sure about chrome)

Last year we published...

N.b there's been a weird trend for blogs to remove publish dates and it really compounds the issue when the contents then use relative dates. At least this one has a tiny "last updated" timestamp at the bottom...?

Should be 0-indexed or 1-indexed, but not mixed.

Probably thought 1-indexed is more understandable to regular people.