CSS grid is the shortest way to center elements
- Published at
- Updated at
- Reading time
- 2min
Today I was tweeting about a new CSS property I discovered: place-items
. It is a simple shorthand for โ that's at least what I thought. It turns out that align-items
and justify-content
place-items
is a shorthand for align-items
and justify-items
(thanks Benjamin, for pointing that out).
This discovery made me sad initially because it meant that I could not get rid of one CSS declaration in my flexbox based classes to center elements.
/* this class centers elements using flexbox
and is there to stay */
.center {
display: flex;
align-items: center;
justify-content: center;
}
After sharing my disappointment, Benjamin mentioned something that I didn't think of before. place-items
works perfectly with display: grid
.
I have to admit that even when CSS grid
is cross-browser supported nowadays, I didn't use it much yet. It turns out that you can use display: grid
to center elements as quickly as when using flexbox.
Define display: grid
on an element (see this CodePen as an example), pair the grid-declaration with align-items
and justify-items
and you're good to go! You just centered the child of this element.
<html>
<body class="center-using-grid">
<span>hello from a centered span</span>
</body>
</html>
.center-using-grid {
display: grid;
align-items: center;
justify-items: center;
}
align-items
and justify-items
define the align-self
and justify-self
properties on all direct grid children. Have a look at the devsheet below to learn about these CSS properties.
The nice thing about this approach; you can unify align-items
and justify-items
into a single declaration โ place-items
.
.center-using-grid-even-shorter {
display: grid;
place-items: center;
}
There are only two CSS declarations needed to center elements using CSS grid
.
Well... there was. place-items
wasn't cross-browser supported when this article was published. You had to leverage PostCSS to use it. But browser support looks way better today! ๐
59 | 59 | 79 | 45 | 45 | 11 | 11 | 7.0 | 59 |
You can read more about place-items
in the detailed MDN article about it.
Happy centering, and if you enjoyed this post don't forget to check out my other quick "Today I learned"-posts!
Join 5.3k readers and learn something new every week with Web Weekly.