Grid Alignment — Grid Series Part 2

Photo by Dave on Unsplash

In my previous post, I explained the basics of how to create columns, rows, and gaps.

This time, I will be explaining the different ways we can align the content within its grid-cell(s) and grid-container.

Let’s start with the base case and start working from there!

Here is my base HTML

<div class=”wrapper”>
  <div class=”grid-item-1">One</div>
  <div class=”grid-item-2">Two</div>
  <div class=”grid-item-3">Three</div>
  <div class=”grid-item-4">Four</div>
  <div class=”grid-item-5">Five</div>
</div>

And then my CSS

html {
 box-sizing: border-box;
}
*,
*::after,
*::before {
 box-sizing: inherit;
}
* {
 margin: 0;
 padding: 0;
}
.wrapper {
  display: grid;
  width: 1000px;
  height: 400px;
  background-color: khaki;
  border: 2px solid darkkhaki;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 100px 100px;
}
.wrapper div{
  background-color: orange;
  border: 1px solid darkorange;
  padding: 15px;
  font-size: 24px;
}

This creates a grid-container of 1000x400px with a grid that has 3 columns of 200px and 2 rows of 100px.

Then, the 5 boxes are distributed evenly between the grid-cells as we can see in the picture.

The first thing that we will see is how we can change the alignment of the grid-items inside their grid cell(s).

If we will like to center all grid-items vertically within its grid cell(s), we can use the align-items property.

.wrapper {
 align-items: center;
}

Let’s take into account that if we don’t set a height property in the grid-item.

It will use its intrinsic size (padding + content + border).

We can also set the align property in each grid-item individually by using the align-self property.

So, let’s give it a whirl!

.wrapper .grid-item-1 {
  align-self: start;
}
.wrapper .grid-item-2 {
  align-self: center;
}
.wrapper .grid-item-3 {
  align-self: end;
}
.wrapper .grid-item-4 {
  align-self: stretch;
}

As we can see, in the first row each item is aligned vertically from top to bottom depending on the start, center, and end values.

In the second row, we can see that the fourth item stretched all the space vertically of the grid-cell.

As for the fifth element, It's centered because of the align-items: center property we set before.

Now let’s remove the code we set for the align-items and align-self properties and add this new code.

.wrapper-3 {
  justify-items: center;
}

When we start using the justify-items property, we start working with the horizontal axis.

As I mentioned before, It uses the intrinsic width to calculate de width of the grid-item.

Then, it centers the grid-item within its grid cell(s) horizontally.

You can probably imagine that we also have a self property for justify.

And you are absolutely right!

Go ahead and the rest of the code for this example.

.wrapper-4 .grid-item-1 {
  justify-self: start;
}
.wrapper-4 .grid-item-2 {
  justify-self: center;
}
.wrapper-4 .grid-item-3 {
  justify-self: end;
}
.wrapper-4 .grid-item-4 {
  justify-self: stretch;
}

As we can see, in the first row each item is aligned horizontally from left to right depending on the start, center, and end values.

On the second row, the fourth item stretches the whole width of its grid-cell.

And then, the fifth item had no property set but is affected by the align-items property that we defined before.

Now, let’s go ahead and combine the align and justify items property to see what happens.

So please go ahead and remove all the code we used for the justify-items and justify-self property and add this code.

I think the picture is self-explanatory, for the first row.

As for the second row be aware that we didn’t set any properties for the fifth grid-item but as we can see, stretch is the default value.

Once again remove all the code that we just added for the justify and align properties.

So far we have aligned the grid-items inside its grid cell(s).

Now let’s go ahead and see how we can align the content(the grid itself) with respect to its grid-container.

So please go ahead and this code.

.wrapper {
  justify-content: center;
}

As we can see, the content(grid) is now centered horizontally.

We can also use other properties like space-around to arrange the content.

.wrapper {
  justify-content: space-around;
}

This divides the space left between the columns and their borders.

Note: the default value for justify-content is start

For the next scenario, go ahead and erase the code that we added for the justify-content property.

And add this code so we can center the content vertically.

.wrapper-9 {
  align-content: center;
}

Next, let’s go ahead and add this other piece of code to test another value.

.wrapper-9 {
  align-content: space-between;
}

The image shows that the remaining space was only divided between the columns.

Note: the default value for align-content is start

For my last example, I will center the content in both the horizontal and vertical axis.

Go ahead and add this last piece of code.

wrapper {
  justify-content: center;
  align-content: center;
}

Here is the end result!

As we can see, it was pretty easy to align the content in the center of the container.

I hope you enjoyed this article as much as I enjoyed writing it!

Please leave some claps if you like this story.

See ya!