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:

<style>
  .wrapper {
    display: grid;
    justify-content: center;
  }
</style>
<div class="wrapper">
  <header>Hello World</header>
  <section>Stuff here</section>
  <footer>Copyright notice</footer>
</div>

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:

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:

<style>
  .wrapper {
    display: grid;
    grid-template-columns: 200px;
    justify-content: center;
  }
</style>
<div class="wrapper">
  <header>Hello World</header>
  <section>Stuff here</section>
  <footer>Copyright notice</footer>
</div>

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:

<style>
  .wrapper {
    display: grid;
    grid-template-columns: 120px 120px;
    justify-content: space-around;
  }
</style>
<div class="wrapper">
  <div>Hello</div>
  <div>Bonjour</div>
  <div>Zdravstvuyte</div>
  <div>こんにちは</div>
</div>

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:

<style>
  .wrapper {
    display: grid;
    justify-items: center;
  }
</style>
<div class="wrapper">
  <header>Hello World</header>
  <section>Stuff here</section>
  <footer>Copyright notice</footer>
</div>

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

<style>
  .wrapper {
    display: grid;
    align-content: space-between;
    height: 300px;
  }
</style>
<div class="wrapper">
  <header>Hello World</header>
  <section>Stuff here</section>
  <footer>Copyright notice</footer>
</div>

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

Grid children

Grid structure

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:

<style>
  .wrapper {
    display: grid;
    height: 300px;
    align-items: center;
    border: 2px solid pink;
  }
</style>
<div class="wrapper">
  <header>Hello World</header>
  <section>Stuff here</section>
  <footer>Copyright notice</footer>
</div>

Grid children

Grid structure

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:

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 16px;
  border: 2px solid;
}
/*
  The last child should sit at the top
  of the row, instead of the center
*/
.box:last-of-type {
  align-self: flex-start;
}
.box {
  width: 80px;
  height: 80px;
  background: black;
}
html, body {
  height: 100%;
}

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:

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  justify-items: center;
  height: 100%;
  border: 2px solid;
}
/*
  The last child should move to the
  bottom-right corner of its cell,
  instead of the center.
*/
.box:last-of-type {
  align-self: end;
  justify-self: end;
}
.box {
  width: 80px;
  height: 80px;
  background: black;
}
html, body {
  height: 100%;
}

Here's how this is structured:

Grid children

Grid structure

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:

<style>
.wrapper {
  display: grid;
  grid-template-columns: 250px 250px;
  justify-content: center;
  align-items: start;
  gap: 16px;
}
</style>
<div class="wrapper">
  <article class="card">
    <h2>This card has a heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce finibus lorem ac risus tincidunt vulputate. Aenean aliquet ultricies mauris sed interdum. Vestibulum faucibus condimentum porta.</p>
  </article>
  <article class="card">
    <h2>This one does too!</h2>
    <p>Curabitur vel tempus odio. Nunc et aliquet lectus, a ultrices metus. Nam scelerisque porta metus, vitae ultricies nisi mollis nec.</p>
  </article>
  <article class="card">
    <h2>So does this one</h2>
    <p>Integer at venenatis nunc. Sed in dui viverra, facilisis metus sed, varius risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus elementum tempor enim non maximus. Sed tellus ipsum, sollicitudin sit amet aliquam quis, semper sit amet eros.</p>
  </article>
  <article class="card">
    <h2>Yep, another heading in this one</h2>
    <p>Sed accumsan sed orci vel tristique. Aliquam erat volutpat. Vivamus id eros eleifend, mattis velit non, feugiat leo. Maecenas rutrum felis erat, in malesuada felis placerat ut.</p>
  </article>
</div>

Exercises

Diagonals

Using grid alignment, update the code below to create a "diagonal" set of boxes:

<div class="wrapper">
  <div class="box one"></div>
  <div class="box two"></div>
  <div class="box three"></div>
</div>

.wrapper {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  min-height: 100%;
}
.box {
  width: 50%;
}
.box.one {
  background-color: pink;
}
.box.two {
  background-color: lavender;
}
.box.three {
  background-color: peachpuff;
}
html, body {
  height: 100%;
}

Solution:

Broken rectangles

Let's make something rather neat-looking!

A variable, --rect-width, holds the width of the entire rectangle. Here's how that width is divided, on each row:

The starter code might be a bit hard to make sense of, so feel free to use the Grid devtools to take a peek at the initial setup!

<div class="wrapper">
  <div class="box one"></div>
  <div class="box two"></div>
  <div class="box three"></div>
  <div class="box four"></div>
  <div class="box five"></div>
  <div class="box six"></div>
</div>

.wrapper {
  --rect-width: 100px;
  display: grid;
  grid-template-columns:
    repeat(2, 1fr);
  min-height: 100%;
}
.box {
  width: var(--rect-width);
  height: 80px;
}
.box.one {
  background-color: pink;
}
.box.two {
  background-color: pink;
}
.box.three {
  background-color: lavender;
}
.box.four {
  background-color: lavender;
}
.box.five {
  background-color: honeydew;
}
.box.six {
  background-color: honeydew;
}
html, body {
  height: 100%;
}

Solution: