Centering items in css grid.

October 17, 2020
Thomas Duffy

Written by Thomas Duffy

center-items

CSS grid has revolutionized the way we build grid layouts on the web. When creating grid layouts centering items is a common task. In this post, I’ll show you how to center and align-items when using the CSS grid.

The first scenario we’ll talk about is when we want to center all child elements inside their respective grid-cell—something like in the image below.

center-items

Below, I have an example of some markup and CSS with a grid container with four columns and two rows. With-in each grid-cell, we have a child element.

<html>
  <link href="styles.css" rel="stylesheet" />
  <body>
    <div class="grid-container">
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
    </div>
  </body>
</html>
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 50vh;
}
.grid-item {
  width: 100px;
  height: 50px;
  border: 1px dotted purple;
  background: yellowgreen;
}

css grid-container example

Horizontally centering and aligning all items in a grid-container

Similar to flex-box, we’ll have to use two separate properties to center the elements both vertically and horizontally.

To center the item horizontally or on the x-axis, we give the grid container the property of justify-items and give it a center value.

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 50vh;
  justify-items: center;
}

css grid-container justify-item

If you wanted to align the items at different points of the grid-cell, justify-items also takes three other values, start | end and stretch.

.grid-container {
  justify-items: start | end | center | stretch;
}

justify-item:start

css grid-container justify-item:start

justify-item:end

css grid-container justify-item:end

justify-item:strech

css grid-container justify-item:stretch

Vertically centering and aligning all items in a grid-container

Now, let’s align the items vertically.

We can use the align-items property for vertical alignment or aligning on the y-axis and set it to… you guessed it, center.

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 50vh;
  justify-items: center;
  align-items: center;
}

The property align-items also take the same properties as justify-items, which are the following.

.grid-container {
  align-items: start | end | center | stretch;
}

align-items: center

css grid-container align-items:center

align-items: start

css grid-container align-items:start

align-items: end

css grid-container align-items:end

align-items: strech

css grid-container align-items:strech

Align Grid items independent of the grid-container

The second scenario is if you want to align the items independently of the other grid cells. For example;

css grid-item center alignment

Horizontal grid-item centering

We also have two specific properties for horizontal and vertical alignment to center a single item within a grid-cell. We would add the property justify-self: center to the item we are aligning in the grid-cell for horizontal centering.

example code of justify-center

.grid-item-c {
  width: 100px;
  height: 50px;
  border: 1px dotted purple;
  background: blueviolet;
  justify-self: center;
}

css grid-item justify-self:center

Vertical grid-item centering

Now, let’s center the item in the cell vertically using the align-self: center.

.grid-item-c {
  width: 100px;
  height: 50px;
  border: 1px dotted purple;
  background: blueviolet;
  justify-self: center;
  align-self: center;
}

Both of the properties also have other alignment options and take the same values as align-items and justify-items.

.justify-self {
  justify-self: start | end | center | stretch;
}

.align-self {
  align-self: start | end | center | stretch;
}

Which give you full control over where you place an item in the grid cell

Shorthand way to center and align grid-cell item

Finally, there is a shorthand way to align or center an item in a grid cell. We can use the place-self and pass in the x and y values like this.

.grid-item-b {
  width: 100px;
  height: 50px;
  border: 1px dotted purple;
  background: blueviolet;
  place-self: center stretch;
}

conclusion

That’s it for centering items within a grid! I hope you enjoyed this post!


Thomas Duffy

Written by Thomas Duffy