Place-Items and CSS Grid – centering content in cells

New day, new CSS property discovered 🎉.

This time was place-items a shorthand for the align-items and justify-items properties.

We can very easily center the contents in CSS grid cells by saying:

.my-grid-element {
    display: grid;
    place-items: center;
    /* place-items replaces the following:
    align-items: center;
    justify-items: center; */
}

Place-items and place-content

There is a very similar property to place-items named place-content.

Keep in mind that place-items and place-content differ in their function:

  • place-items sets the position of each item relative to the container
  • while place-content sets the position of the content inside each item relative to its container.

The place-items prop is typically used for grid layouts, whereas place-content is more commonly used for positioning blocks of text or images.

You can checkout the below video of Kevin Powell for a more in-depth comparison:

📖 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.

📖 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.


Leave a Reply

Your email address will not be published. Required fields are marked *

Home Screencasts Best of Newsletter Search X

📖 50 Javascript, React and NextJs Projects

Hi friend! Before you go, just wanted to let you know about the 50 Javascript, React and NextJs Projects FREE ebook.

One of the best ways to learn is by doing the work. Choose from 8 project categories and get started right away:

  • Business & Real-World
  • Games & Puzzles
  • Fun & Interesting
  • Tools & Libraries
  • Personal & Portfolio
  • Project Add-Ons
  • Productivity
  • Clones

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects complete with project briefs and wireframes!

Keep building and level up! Get all projects as an ebook right to your inbox!

X