Skip to content

Alignment

When it comes to alignment in Flexbox, we can control the distribution along the primary axis with justify-content, and along the secondary axis with align-items.

Things are kinda similar in CSS Grid. We use some of the same properties, but they don't quite work exactly the same way.

Aligning columns

We'll start by looking at how to align columns. For that, we use justify-content:

Code Playground

Result

Enable “Tab” for indentation

The default behaviour in CSS Grid is to stretch the columns to take up all available space. justify-content: center overrules this behaviour.

In order to center our column within the grid, it has to figure out how wide that column should be. This is no small task! It has to look at the contents of each row, and figure out which child is widest.

We can see this result in the devtools:

The grid above, visualized in the devtoolsThe grid above, visualized in the devtools

In the first image, we see that the width of our column is 123.72px. In the second image, we inspect the last child, and see that it also has a width of 123.72px.

Because that third child has the widest natural width, the entire column shrinks to fit that width, and that width is used for the other elements (which would otherwise be shorter).

We can skip this whole process by giving the column an explicit width:

Code Playground

Result

Enable “Tab” for indentation

In addition to center, we also have start and end. This is similar to flex-start and flex-end, but since we aren't in Flexbox, we can omit the flex- prefix.

We also have the "distributed" options we saw in the Flexbox module: space-between, space-around, and space-evenly. They make more sense when our grid has multiple columns:

Code Playground

Result

Enable “Tab” for indentation

So, justify-content allows us to change how our columns are distributed. But there's another property we need to familiarize ourselves with: justify-items.

Poke around with this example, and see if you can make sense of what it's doing:

Code Playground

Result

Enable “Tab” for indentation

At first glance, this seems to violate one of our core principles: columns aren't supposed to change their width across different rows! A column should be a consistent width, for the entire length of the grid.

Upon closer inspection, though, we notice something interesting:

The grid above, visualized in the devtools

The columns are actually full-width! But the items within the column have been shrunk down and centered.

Normally, a grid child will stretch across the entire width of its column. If we place an element in a 100px-wide column, we'll get a 100px-wide element.

But that's just the default, it isn't set in stone. justify-items changes this behaviour so that the child element moves around within its cell.

In other words:

  • justify-content applies to the grid structure, changing the columns.
  • justify-items applies to the child elements, without affecting the shape of the grid.

Aligning rows

In CSS Grid, align-content is how we align the rows in our grid:

Code Playground

Result

Enable “Tab” for indentation

Here's a visualization showing what's happening here:

Because align-content is set to space-between, the grid has shifted the rows to be as far apart from each other as possible, like magnets that are repelling each other. And because we haven't given our rows an explicit height, they stick with their intrinsic size, 26px.

Note that this only works because we've given our grid a fixed height of 300px. Without that declaration, align-content has no effect: the rows will be packed in like sardines! We need some free space in the grid, otherwise there really isn't any difference between the options.

How about align-items? You guessed it: it controls the element's vertical position within the row:

Code Playground

Result

Enable “Tab” for indentation

With align-items, we control the placement of individual elements within each cell.

Self-alignment

In Flexbox, align-items is used on the parent to control the cross-axis position for all of the elements. But we also have align-self, which allows a specific child to overrule it:

Code Playground

HTML

CSS

Result

Enable “Tab” for indentation

In CSS Grid, align-self works pretty much the same way. We apply it to specific grid children, and it changes their vertical position within the grid cell.

We also have justify-self, which changes a particular element's horizontal position, within the grid cell:

Code Playground

HTML

CSS

Result

Enable “Tab” for indentation

Here's how this is structured:

When to use items vs content

So far, we've been spending our time in the realm of the theoretical, learning about the rules of the algorithm.

Let's talk a bit about when these different tools come in handy.

The playground from the video:

Code Playground