place-content
A shorthand property that sets align-content and justify-content at once. Controls the alignment of the entire content within a grid container.
Class List
| Class | CSS | Description |
|---|---|---|
pcs | place-content: start | Align content to the start position |
pcc | place-content: center | Center content horizontally and vertically |
pce | place-content: end | Align content to the end position |
pcst | place-content: stretch | Stretch content to fill the entire container |
pcsb | place-content: space-between | Place first/last items at edges, distribute rest evenly |
pcsa | place-content: space-around | Equal margin around each track |
pcse | place-content: space-evenly | Distribute all gaps completely evenly |
Visual Comparison
Compares alignment differences based on place-content values with a fixed-height grid container.
start — pcs
ABCD
center — pcc
ABCD
end — pce
ABCD
space-between — pcsb
ABCD
space-evenly — pcse
ABCD
Usage Examples
<!-- Grid content center aligned -->
<div class="dg gtcr2-1fr pcc h100vh">
<div>Center aligned content</div>
<div>Center aligned content</div>
</div>
<!-- Separate top/bottom with space-between -->
<div class="dg pcsb h100vh">
<header>Header (top)</header>
<footer>Footer (bottom)</footer>
</div>Tips & Notes
Perfect centering with pcc
dg pcc is the most concise way to center grid content both horizontally and vertically.
place-content vs place-items
place-content aligns the entire grid tracks, while place-items aligns items within each cell. The difference appears when the container has extra space.