Learn CSS Grid vertical align in 2 minutes

Written by Shan Shah
Updated on November 2, 2021
2 mins read
css grid vertical align

It was challenging to align the items like the hero text box, call to action, images, buttons in the center of the screen, or a vertical direction.

But now it's really easy with CSS Grids and flexbox. 

As you may already know, CSS Grid is the new layout standard for the web.

CSS Grid vertical align is a concept of moving the desired grid children in the Y or vertical direction. 

A Quick Image to understand what is vertical and horizontal:

horizontal vs vertical difference

You can see a laptop image, which is a child of CSS Grid container.

css grid tutorials

To move it in the middle, you can use align-items: center;

Similar to this, you can utilize other values of align-items. 

grid vertical align

If you want to move in the middle of the screen, you can put justify-content: center; along with align-items: center;

Note: Make sure that your container or parent should have display: grid; property.

css grid middle of the screen

CSS Grid vertical align with the shortest way possible

Yes, there is a short form to align the elements in the middle of the screen.

You can utilize place-items: center

It's a short form for justify-content: center; and align-items: center;

shortest way css grid middle of the screen

If you are new to CSS Grids, you should check a complete guide by CSS tricks. Their guide is pretty helpful.

Go ahead and read: A Complete Guide to CSS Grids

We did a straight-to-the-point article about CSS justify-content: space-between. You will love it.

Project Based Tutorials
Tips & Tricks
Modern Technologies
Real-World Challenges
Creative Content
Build-Apps from Scratch
Web Development Content
17+ Videos Published
Coder Champ © 2023 - 
Privacy Policy
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram