CSS grid will soon be the shortest way to center elements (#tilPost)

Today I was tweeting about a new CSS property I discovered: place-items. It is a simple shorthand for align-items and justify-content – that’s at least what I thought. It turns out that place-items is a shorthand for align-items an…


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis

Today I was tweeting about a new CSS property I discovered: place-items. It is a simple shorthand for align-items and justify-contentthat's at least what I thought. It turns out that 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.

How to center elements using CSS grid

Section titled How to center elements using CSS 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.

Is there a catch about centering elements using display: grid and place-items?

Section titled Is there a catch about centering elements using `display: grid` and `place-items`?

Well... kind of. place-items is not cross-browser supported yet (basically, it's Chrome and Firefox today), but fortunately, PostCSS has you covered so that you can use it today. ?

Edited November 2020: The browser support is way better now. ?

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!


Reply to Stefan


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis


Print Share Comment Cite Upload Translate
APA
Stefan Judis | Sciencx (2022-12-08T16:14:21+00:00) » CSS grid will soon be the shortest way to center elements (#tilPost). Retrieved from https://www.scien.cx/2018/07/01/css-grid-will-soon-be-the-shortest-way-to-center-elements-tilpost/.
MLA
" » CSS grid will soon be the shortest way to center elements (#tilPost)." Stefan Judis | Sciencx - Sunday July 1, 2018, https://www.scien.cx/2018/07/01/css-grid-will-soon-be-the-shortest-way-to-center-elements-tilpost/
HARVARD
Stefan Judis | Sciencx Sunday July 1, 2018 » CSS grid will soon be the shortest way to center elements (#tilPost)., viewed 2022-12-08T16:14:21+00:00,<https://www.scien.cx/2018/07/01/css-grid-will-soon-be-the-shortest-way-to-center-elements-tilpost/>
VANCOUVER
Stefan Judis | Sciencx - » CSS grid will soon be the shortest way to center elements (#tilPost). [Internet]. [Accessed 2022-12-08T16:14:21+00:00]. Available from: https://www.scien.cx/2018/07/01/css-grid-will-soon-be-the-shortest-way-to-center-elements-tilpost/
CHICAGO
" » CSS grid will soon be the shortest way to center elements (#tilPost)." Stefan Judis | Sciencx - Accessed 2022-12-08T16:14:21+00:00. https://www.scien.cx/2018/07/01/css-grid-will-soon-be-the-shortest-way-to-center-elements-tilpost/
IEEE
" » CSS grid will soon be the shortest way to center elements (#tilPost)." Stefan Judis | Sciencx [Online]. Available: https://www.scien.cx/2018/07/01/css-grid-will-soon-be-the-shortest-way-to-center-elements-tilpost/. [Accessed: 2022-12-08T16:14:21+00:00]
rf:citation
» CSS grid will soon be the shortest way to center elements (#tilPost) | Stefan Judis | Sciencx | https://www.scien.cx/2018/07/01/css-grid-will-soon-be-the-shortest-way-to-center-elements-tilpost/ | 2022-12-08T16:14:21+00:00
https://github.com/addpipe/simple-recorderjs-demo