The place-content shorthand sets align-content (block axis) and justify-content (inline axis) in one declaration. A single value applies to both axes; two values set block axis then inline axis..grid {
place-content: center;
}.dashboard {
display: grid;
place-content: space-between center;
}normalContainer default (default).startStart of axis.endEnd of axis.centerCenter.stretchItems stretch.space-betweenEqual space between items.space-aroundEqual space around items.space-evenlyTruly equal spacing.baselineBaseline alignment (equivalent to first baseline).first baselineAligns to the first baseline of the box.last baselineAligns to the last baseline of the box.flex-startFlush with the flex container's main-start/cross-start; behaves as start outside flex.flex-endFlush with the flex container's main-end/cross-end; behaves as end outside flex.leftFlush with the left edge — valid for justify-content only, not align-content.rightFlush with the right edge — valid for justify-content only, not align-content.safeIf the subject overflows, aligns as start to avoid data loss.unsafeHonors the specified alignment even if the subject overflows.CSS Box Alignment Module Level 3Editor's DraftW3CMDNBox 1Box 2Box 3Show all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationsourcesvisual demonstrationpreviousnext
