Like many software engineers, I've long used CSS flexbox. I'm less familiar with grid, even though it seems straightforward. So I picked up Rachel Andrew's The New CSS Layout to learn more.

Key insights

A simple, but relatively unknown, layout method is multi-column layout. It splits up the content of a container into columns, like a newspaper. column-count sets the desired number of columns, and column-width the desired width. When used together, column-count is the maximum number of columns, and less columns will be displayed when there isn't space.

An example in the book is splitting up a list of checkboxes into less vertical space when there's space.

Flexbox lays out items 1-dimensionally, or in a line. Even if it wraps into multiple "rows", it's not meant to line up the resulting "columns".

One thing I learned about flexbox is what flex basis, grow, and shrink actually do. flex-basis sets an intrinsic size on an item. flex-grow describes how extra space is allocated to an item, in proportion to the other flexed items (which reminds me of how fractional units work in grid). flex-shrink describes how an item is shrunk in proportion to the other items.

Another interesting tidbit was that alignment (align-items, justify-content, etc) uses the words "start" and "end" instead of "left" and "right" for internationalization. Not all languages are read from left to right, and CSS works regardless of text direction.

Grid is 2-dimensional. Unlike flexbox, no properties need to be set on any of the grid items. You can specify a specific number of columns or rows with something like

grid-template-columns: repeat(4, 1fr);

Or base the number of columns off of the size of each item's content. For example,

grid-template-columns: repeat(auto-fill, 200px);

will use as many 200px wide columns that fit. You  can also make the width of each column or row flexible, with a minimum. For example,

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

again uses as many 200px columns as will fit, and allocates any extra space evenly to each column.

Versions 1 and 2 of CSS were monolithic. Each was a single specification that covered everything. Now it's modular. For example, there are display level 3, selectors level 3, and grid level 1 specifications.

You can follow development and make suggestions on GitHub at https://github.com/w3c/csswg-drafts/issues. Also, there's a weekly phone conference. Notes are posted to https://lists.w3.org/Archives/Public/www-style/.

The New CSS Layout is a good intro to modern layout techniques. I was hoping for more about creating actual layouts, and was a little disappointed. But I think that's not what it was intended for, and it's still a nicely done way to familiarize yourself with the building blocks of layout.