What is (CSS) grid

CSS grid layout (from here on, just grid) is another recent addition to CSS, continuing on from flexbox. While flex is a one-dimensional layout system—focused on horizontal or vertical arrangements—grid is two-dimensional system, integrating the two directions together.

Grid supplants many of the previous box model layout systems (like floats, margin-centering, etc.) and, like flex, works much closer to how we think about layouts as designers. It can get complicated, but makes most layouts (especially responsive ones) much, much easier to implement.

We had some of this two-dimensionality with flex-wrap, but grid offers much more control.

Containers and items

Grid is a lot like flex—a display property applied on a parent/container element. This display: grid; tells its (immediate) children/grid items how they should be laid out.

And again like flex, there is also display: inline-grid; which behaves the same internally, but the parent behaves as an inline element.

Grid terminology

Borrowed from the WebKit post.

Line (think… gutters?)

The dividing lines that define the grid, vertical or horizontal.

Track (think rows and columns)

The horizontal rows or vertical columns between the tracks.

Cell

The intersection of a a horizontal and vertical track. This is different from a *grid item—*the cell is the spot/placement, the item is the actual element—since as you’ll see, you can position items in an arbitrary cell.

Area

You can combine one or more adjacent grid cells into a rectangular area. Often you give these a name, for convenience.

Some new units and functions

Grid also introduces some specific new length units and functions to use them.

The `fr` unit

The new fr length unit represents a fraction of the available space in the grid container—usually, width. This is kind of like using percentages, except we no longer have to do the maths and any padding or gap (gutter) is accounted for. This is very handy; you’ll use it a lot.

grid-template-columns: 2fr 1fr;
gap: 20px;