The CSS place-content shorthand sets align-content and justify-content together. Its two-value form controls alignment on both axes, making grid and flex layouts easier to tune. section 5.6 section 4.4.1
Center tracks and start them horizontally
For a grid, place-content: center start is equivalent to align-content: center; justify-content: start. The first value places grid tracks along the block axis, while the second positions them along the inline axis. section 5.6
Choose place-content when the container has extra space to distribute:
- Use it with grid alignment values such as center, stretch, space-between, space-around, and space-evenly. section 5.6
- In a wrapping flex container, use it to control spacing between rows along the cross axis while also setting justify-content. section 4.4.1
- Remember that Flexbox justify-content has no effect when main-axis auto margins or non-zero flex-grow consume the available space first. section 4.4.1
Figure 5.22 Alignment properties for a grid
A grid alignment figure helps compare how content positions and distributes within the container. section 5.6
