And (CSS) Grid

Just as in nature systems of order govern the growth and structure of animate and inanimate matter, so human activity itself has, since the earliest times, been distinguished by the quest for order.

↗ Josef Müller-Brockmann

From Flex to Grid #

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

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

Grid is a lot like flex (this will be a running theme)—a display property applied on a parent/container element. This display: grid; tells its (immediate) children/grid items how they should be laid out. Also like flex, there is display: inline-grid; which behaves the same internally—but with the parent behaving as an inline element.

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

There are many novel, powerful uses for grid—it is really the backbone of modern web layout. Let’s take a look.

Grid Terminology #

Grid introduces us to some new vocabulary:

Line
The dividing lines that define the grid, vertical or horizontal. (Think gutters.)
Track
The horizontal or vertical space between the lines. (Think rows and columns.)
Cell
The intersection of 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 subjective name, for convenience/ergonomics.

New Units and Functions #

Grid also introduces some specific new length units:

fr

This new unit represents a fraction of the available space in the grid container—usually, width. This is very similar to using whole numbers in flex-basis. This is very handy; you’ll use it a lot with grid:

		.two-thirds-one-third {
	display: grid;
	grid-template-columns: 2fr 1fr;
}
min-content

The intrinsic minimum width of an element. With text, this is the longest single word:

		.narrow-sidebar {
	display: grid;
	grid-template-columns: 1fr min-content;
}
max-content

Same for the maximum. With text, this is the whole sentence/line:

		.wider-sidebar {
	display: grid;
	grid-template-columns: 1fr max-content;
}
fit-content

A combo of the min/max. Uses the available space—but never less than min-content and never more than max-content:

		.fit-sidebar {
	display: grid;
	grid-template-columns: 1fr fit-content;
}

You can use these last three values in grid properties (min-, max-, and fit-content), as we’ll see below—but they are also usable anywhere length units work—like width or height.

…and also functions to use the units:

minmax()

A function that defines a range for a track—setting a minimum and maximum length together. These are really useful for setting reasonable limits on responsive grid designs:

		.flexible-sidebar {
	display: grid;
	grid-template-columns: 1fr minmax(200px, 400px);
}
repeat()

This function repeats a track list, so you don’t have to write it over and over:

		.twelve-columns {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	/* How many columns is this? 👆 */
}
.also-twelve-columns {
	display: grid;
	grid-template-columns: repeat(12, 1fr); /* Much better. */
}

Container (Parent) Properties #

Again, grid is a lot like flex—primarily properties that are applied on a container/parent element.

grid-template-columns , grid-template-rows #

Setting display: grid; won’t do much until you also declare some columns or rows, with grid template. You can specify grid-template-columns, grid-template-rows, or both. These properties are followed by a track list of the size for each track:

Notice in the second example, the items do not wrap to a new column—because grid-auto-flow: row; is the default setting. The third example sets this to column to make it flow to a new one.

Again like flex, there is similar behavior on the horizontal/vertical axes—with the defaults around horizontal/row based behavior since width is usually our constraint (with pages scrolling vertically).

So for many uses, you will only need to specify your column structure—leaving the rows to create themselves, as needed. This is called an implicit grid (vs. an explicit grid that we set/define):

The additional rows are automatically added, as needed. Note that they size vertically to their largest content!

grid-auto-columns , grid-auto-rows #

By default, these implicit grid tracks are sized auto (the largest content), but you can also specify their size—often a height for the grid-auto-rows:

But grid-auto-columns only comes up if you force the columns to wrap with grid-auto-flow: column; as in the earlier example. Again—height is usually not our main constraint, with scrolling!

gap , column-gap , row-gap #

Grid also shares the gap, column-gap, and row-gap properties with flex—to add gutters between the tracks. The syntax and behavior is the same:

You rarely see a grid without a gap.

justify-items #

Also like flex (there’s a pattern here), we can position items within the tracks—but now we have control over both axes and the overall placement. To start, justify-items positions all the grid items along their row axis.

The terminology here is always a bit confusing, but think of it this way—in grid, the main axis is always the horizontal row. So justify always means left/right, and align always means top/bottom. Easier to remember than flex! No flipping axes:

align-items #

And align-items directly corresponds to the flex values, to position all the items vertically along their column axis:

Note that there isn’t any change on the last implicit row with the default auto/content height.

There are also baseline align values, to keep text on the same line across columns:

justify-content , align-content #

If the total size of your grid is less than the container (because of your explicit column or row sizes), you can set the overall justification and alignment within the container:

Again, this is just like flex! Same syntax, same behavior—you get the idea. Grid is like Flex+.

Shorthand? #

Grid also has shorthand properties for many of these, like grid, grid-template, place-items, and place-content. However just like everything else, grid is complicated enough as it is! The shorthands really obfuscate the behavior, and aren’t worth the slightly tighter syntax.

Okay, so this is mostly like flex! To the point where you can use them interchangeably for some layouts. You get it. But now let’s look at where grid offers more specific and powerful control.

Using repeat #

Grid’s repeat function is very commonly used to make even-column grids. And of course, they can be made responsive with media queries and CSS variables!

Notice that the items always stick to the grid structure—independent of their content—unlike our previous flex-wrap pseudo-grids.

Flex is sometimes referred to in this way as content-out, while grid is a layout-in system.

auto-fill , auto-fit #

You can also use the repeat function without specifying an exact number of columns, instead using auto-fill or auto-fit to automatically define your columns—making a grid inherently responsive without any media queries! These are great for controlling an even-column layout without much overhead:

Drag the divider over to see the difference in auto-fill / auto-fit behaviors.

grid-template-areas #

Grid is really useful for scaffolding out layouts, and sometimes it is helpful to give your grid areas qualitative/descriptive names that reflect their usage. This also makes it possible for the grid items (children) to reference them, below.

This is done with a bit of ASCII art to reflect the layout! Repeating the name of a grid area makes the content span those cells. The syntax itself then provides an ergonomic visualization of the grid structure (for us humans):

You can also name grid lines with [linename] length syntax, but you don’t see this done as much.

		section {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-areas:
		"header header "
		"main   sidebar"
		"footer sidebar";
}

Item (Child) Properties #

You can really start to see the power of grid when you use these properties on the individual grid items (children) within the containers. While the container (parent) properties usually make for uniform layouts, item (child) properties allow for unique structures.

grid-area #

If you’ve defined grid-template-areas (as above), you can then assign individual children to these areas:

This is the kind of common layout that was unnecessarily hard before grid! It’s so much easier now.

grid-column , grid-row #

You can also control item placement in unnamed (and implicit) grid areas with the grid-column and grid-row properties.

These take two values, divided with a / (because CSS is inconsistent), which specify the start line and end line. There is also a span value for bridging across tracks:

Notice that we can leave off the end line if it doesn’t span multiple tracks, and also that you either add a span or a specific end line number.

These are technically shorthand properties, but we’ll allow it here—they are easier to read!

You can also leave off the start line if you just want to specify a span, regardless of where the item falls in the grid:

We’ve added grid-auto-flow: dense; to the container—allowing the seventh item to scoot up “before” the bigger one.

And if you specify non-contiguous rows or columns, grid will create as many implicit tracks as it needs to accommodate them—even if they are empty:

Note that just like order in flex, this arrangement is only visual! Keep your DOM in a logical, semantic sequence.

Keep in mind that with both grid-area and grid-column / grid-row, you are able to tell multiple grid items to land in the same cell—there isn’t any kind of fancy/automatic collision-prevention. If this is what you want, you can use z-index to specify which one is visually in front!

justify-self , align-self #

Finally, just like flex—you can position individual grid items within their tracks using justify-self and align-self. The syntax is the same as align in flex, again—but as with justify-items / align-items above, you don’t have to flip axes:

You can mix and match these justify/align values, of course!

The grid system is an aid, not a guarantee.

It permits a number of possible uses and each designer can look for a solution appropiate to [their] personal style. But one must learn how to use the grid; it is an art that requires practice.

↗ Josef Müller-Brockmann