How to Center in CSS with CSS Grid
Tags: css, html
Published: 2020-04-05 05:13:52

---
title: How to Center in CSS with CSS Grid
published: true
description: Learn how to center content like images, text, and divs vertically and horizontally in CSS using CSS Grid.
tags: css, html
canonical_url: https://coryrylan.com/blog/how-to-center-in-css-with-css-grid
---

Using CSS Grid, we can layout content in a two-dimensional grid with columns and rows. CSS grid is a fantastic CSS API to layout content on the web. Often we need to center content within a page or container. We can accomplish this in many different ways in CSS. In a previous post, we learned [how to center using Flexbox](https://coryrylan.com/blog/how-to-center-in-css-with-flexbox); in this post, we will learn how to center content using CSS Grid.

In our example, we have two elements: a parent element and the child element. We want to center the child element within the width of the parent element container.


```css
section {
  width: 200px;
  border: 1px solid #2d2d2d;
}

div {
  color: #fff;
  background: #2d2d2d;
  padding: 12px;
  display: inline-block;
}
```

<img src="https://coryrylan.com/assets/images/posts/2020-04-05-how-to-center-in-css-with-css-grid/centering-in-css-grid-1.png" alt="Inline block item to be centered with CSS Grid">

To center our item, we need to set the parent element to render as a CSS Grid.


```css
section {
  width: 200px;
  border: 1px solid #2d2d2d;
  display: grid;
  justify-content: center;
}
```

First, we set the `section` to have configured to `display: grid`. This CSS property sets the element to render using CSS Grid. Now each direct child element will be a grid item placed in a column. To align the item horizontally within the grid, we use the `justify-content` property and set it to `center`.

<img src="https://coryrylan.com/assets/images/posts/2020-04-05-how-to-center-in-css-with-css-grid/centering-in-css-grid-2.png" alt="Inline block item centered with CSS Grid">

With `justify-content` we can align the columns `start`, `end`, `stretch` or `center`.

## Centering Vertically

Now that the element is centered horizontally, we can center the element vertically. Let's increase our parent container to be 200px high.

<img src="https://coryrylan.com/assets/images/posts/2020-04-05-how-to-center-in-css-with-css-grid/centering-in-css-grid-3.png" alt="Inline block item to be vertically centered with CSS Grid">

Similar to Flexbox, Grid columns will fill the space where they are defined. To center the item vertically we set `align-content: center;`.

```css
section {
  display: grid;
  justify-content: center;
  align-content: center;
}
```

<img src="https://coryrylan.com/assets/images/posts/2020-04-05-how-to-center-in-css-with-css-grid/centering-in-css-grid-4.png" alt="Inline block item vertically centered with CSS Grid">

To center multiple items, we need to add a couple more CSS properties to
the parent grid element.

```html
<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</section>
```

```css
section {
  display: grid;
  justify-content: center;
  align-content: center;

  gap: 4px;
  grid-auto-flow: column;
}
```

The first property `gap` allows us to define space between grid items. The second property `grid-auto-flow`, will enable us to define the direction we want items
to layout, such as from left to right or vertically stacked as rows.

<img src="https://coryrylan.com/assets/images/posts/2020-04-05-how-to-center-in-css-with-css-grid/centering-in-css-grid-5.png" alt="Inline block item horizontally centered with CSS Grid">

When using `justify-content` and `align-content`, we are aligning the columns relative to the parent Grid container. In our next example, we will see how we can align items relative to the column instead of the parent grid container.

## Centering Items within a CSS Grid Column

CSS Grid is very powerful and gives us excellent grain control of our layouts. We learned how to center columns in a grid but now lets center items within a column.

For our example, we will create a grid layout with three columns and three items.


```css
.item-center {
  display: grid;
  grid-auto-flow: column;
  gap: 4px;
  align-items: center;
  justify-items: center;
}
```

To center the items within a column, we use `align-items` and `justify-items` instead of the `align-content` and `justify-content` in our previous example. Using the item properties, we can align our items just like we did with our columns.

<img src="https://coryrylan.com/assets/images/posts/2020-04-05-how-to-center-in-css-with-css-grid/centering-in-css-grid-6.png" alt="Inline block item horizontally centered with CSS Grid">

If we use the dev tools and inspect the grid, we can see the outlined columns and our items centered relative to the assigned column.

<img src="https://coryrylan.com/assets/images/posts/2020-04-05-how-to-center-in-css-with-css-grid/centering-in-css-grid-7.png" alt="Inline block item horizontally centered with CSS Grid">

CSS Grid is a fantastic tool to use for layouts in our Web pages and Web Applications. Check out the [full working demo](https://stackblitz.com/edit/js-hdhx7k)!