Chapter 12. Grid Layout

At its inception, CSS had a layout-shaped hole at its center. Designers bent other features to the purposes of layout, most notably float and clear, and generally hacked their way around that hole. Flexbox layout helped to fill it, but flexbox is really meant for specific use cases, like navigation bars (navbars), as shown in Chapter 11.

Grid layout, by contrast, is a generalized layout system. With its emphasis on rows and columns, it might at first feel like a return to table layout—and in certain ways that’s not too far off—but there is far, far more to grid layout than table layout. Grid allows pieces of the design to be laid out independently of their document source order, and even overlap pieces of the layout, if that’s your wish. CSS provides powerfully flexible methods for defining repeating patterns of grid lines, attaching elements to those grid lines, and more. You can nest grids inside grids, or for that matter, attach tables or flexbox containers to a grid. And much, much more.

In short, grid layout was the layout system we long waited for, and in 2017, it landed in all the major browser engines. It takes many, many layouts that were difficult, or even impossible, and invariably fragile, and allows you to create them simply, flexibly, and robustly.

Creating a Grid Container

The first step to creating a grid is defining a grid container. This is much like a containing block in positioning, or a flex container in flexible-box layout: a grid ...