3 min read
•Question 48 of 49easyWhat is place-items and place-content?
Understanding alignment shorthands.
What You'll Learn
- place-items shorthand
- place-content shorthand
- Centering made easy
place-items
Shorthand for align-items and justify-items.
styles.cssCSS
.grid {
display: grid;
place-items: center; /* Both axes */
place-items: start end; /* align justify */
}place-content
Shorthand for align-content and justify-content.
styles.cssCSS
.grid {
display: grid;
place-content: center;
place-content: space-between center;
}Perfect Centering
styles.cssCSS
/* Grid centering */
.center-grid {
display: grid;
place-items: center;
min-height: 100vh;
}
/* Flex centering */
.center-flex {
display: flex;
justify-content: center;
align-items: center;
}