CSS Grid most easy center vertical and horizontal

Which I've used in about almost all me articles that include a demo, it is now time to give you a view of the same principle using CSS Grid.

Much like Flexbox, it's super easy to center element using Grid.

To fully center a element all we need is:

.container {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

The min-height is optional in this case it's needed to give it a vertical height.

This will result in the following:

CSS Grid center only horizontal

If for instance you would only want something centered horizontal you can use the following CSS:

.container {
  display: grid;
  justify-content: center;
  min-height: 100vh;
}

We can use the justify-content and pass the center value to make it horizontally centered.

Note: this is the same use as for display: flex.

This results in the following Codepen.

On the other hand, maybe you are looking to only center it vertically.

You can use the following CSS to achieve this.

.container {
  display: grid;
  align-items: center;
  min-height: 100vh;
}

We use the align-items with a value of center to get a vertical alignment.

Note: This is as well the same functionality as we've seen in CSS Flex

This results in the following Codepen.

There you go, we now learned another super-easy way to center elements using CSS Grid.

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter