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.