DEV Community

Cover image for CSS Grid most easy center vertical and horizontal
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

CSS Grid most easy center vertical and horizontal

As a follow up on the CSS Flex center article.

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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.

CSS Grid center only vertical

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;
}
Enter fullscreen mode Exit fullscreen mode

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, and let's connect!

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

Top comments (6)

Collapse
 
madza profile image
Madza

place-items: center was a game-changer for me ๐Ÿ˜‰
I use it all the time, since I love GRID ๐Ÿ˜‰

Collapse
 
dailydevtips1 profile image
Chris Bongers

Can understand why, I'm still in love with flex, just love the easy justify options.
But using place-items more and more.

Collapse
 
richardnikolas profile image
Richard Nikolas
  • Flex is recommended when you're working with just one dimension (X or Y)
  • Grid is better when you have to work with the two dimensions (X and Y)

And it's great to use both together!

Collapse
 
madza profile image
Madza

I like flex for inside components (like header, footer, etc) and grid for general layout ๐Ÿ˜‰

Thread Thread
 
dailydevtips1 profile image
Chris Bongers

Ah good mix indeed!

Collapse
 
ikurosaki profile image
ikurosaki

Muy buen aporte.