And (CSS) Grid

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:

• grid-auto-columns – MDN
• grid-auto-rows – MDN
  Lets the content create the tracks.

The perpendicular 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!

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:

• gap – MDN
• row-gap – MDN
• column-gap – MDN
  The exact same as with flex!

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.

justify-items – MDN
This only works with grid.

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:

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

align-items – MDN
Same as flex, again!

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

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 grid container:

• justify-content – MDN
• align-content – MDN
  When there is extra space.

Grid also has shorthand properties for many of these, like just 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 far this is mostly like flex! To the point where you can often use them interchangeably for some layouts. You get it.

But now let’s look at where grid offers more specific and powerful control.

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!

repeat() – MDN
Remember, D.R.Y!

The () indicates this is a function (like our friend calc() ) that you would pass arguments⁠—a common software paradigm.

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

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:

• Auto-Sizing Columns in CSS Grid – CSS Tricks
  Better than MDN, for this.

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.

grid-template-areas – MDN
These are grid’s real designer superpower.

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

			
	

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

grid-area – MDN
These go on the items/​children.

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

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

• grid-column – MDN
• grid-row – MDN
  Where should the item go?

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:

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:

And if you specify non-contiguous rows or columns, grid will dutifully create as many implicit tracks as it needs to accommodate them⁠—even if they are empty. Not every cell or track must be filled:

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!

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:

• justify-self – MDN
  Just for grid.
• align-self – MDN
  Same as in flex!

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, 1961