Artboard 16light, inspiration, solution, idea, innovation,Google Sheets iconSwift icon
Published at
Updated at
Reading time
2min
This post is part of my Today I learned series in which I share all my web development learnings.

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 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

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?

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! πŸŽ‰

MDN Compat Data (source)
Browser support info for place-items
chromechrome_androidedgefirefoxfirefox_androidsafarisafari_iossamsunginternet_androidwebview_android
59NeiNon45Nein11NopeNΓΆNope

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!

Related Topics

Related Articles