How to align objects vertically when working with grids in CSS ?
Last Updated :
07 Jan, 2020
CSS grid layout is one of the strongest layout of CSS. The grid layout is 2-D which means it can handle both rows and columns, unlike flexbox which is 1-D. To align objects apply CSS to the parent element which becomes the grid container and the element’s child which becomes the items in the grid.
Approach:
Use the align-content property of CSS grids to vertically align objects.
Syntax:
align-content: center;
Example 1:
<!DOCTYPE html>
< html >
< head >
< style >
.gfg {
display: grid;
/* display is set to grid layout */
height: 400px;
align-content: center;
/* vertically aligns objects to the center */
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: #4dd599;
/* background colour is set */
padding: 10px;
}
.gfg > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
/* text inside the container is set to center */
padding: 20px 0;
font-size: 30px;
}
</ style >
</ head >
< body >
< div class = "gfg" >
< div >Welcome</ div >
< div >to</ div >
< div >Geeks</ div >
< div >for</ div >
< div >Geeks</ div >
< div >Start</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2:
<!DOCTYPE html>
< html >
< head >
< style >
.gfg {
display: grid;
/* display is set to grid layout */
height: 400px;
align-content: center;
/* vertically aligns objects to the center */
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: #f67280;
/* background colour is set */
padding: 10px;
}
.gfg > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
/* text inside the container is set to center */
padding: 20px 0;
font-size: 30px;
}
</ style >
</ head >
< body >
< div class = "gfg" >
< div >Explore</ div >
< div >the</ div >
< div >world</ div >
< div >travel</ div >
< div >and</ div >
< div >eat</ div >
</ div >
</ body >
</ html >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...