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-itemssets the position of each item relative to the container- while
place-contentsets 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:
š Neural Networks from Scratch - Presale
I'm writing a book about the timeless foundational concepts of neural networks for JavaScript developers. Go from if-else to weights and biases by building tiny AI models from scratch!
š Neural Networks from Scratch - Presale
I'm writing a book about the timeless foundational concepts of neural networks for JavaScript developers. Go from if-else to weights and biases by building tiny AI models from scratch!