The place-items shorthand sets align-items (block axis) and justify-items (inline axis) in one declaration. Single value applies to both axes; two values set block then inline. Especially useful for centering all items..grid {
place-items: center;
}.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
place-items: end stretch;
}normalContainer default.stretchItems stretch to fill the cell.startStart edge of the alignment container.endEnd edge of the alignment container.self-startFlush with the start edge of the alignment subject's own writing mode.self-endFlush with the end edge of the alignment subject's own writing mode.centerCenter.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.baselineBaseline alignment (equivalent to first baseline).first baselineAligns to the first baseline of the item.last baselineAligns to the last baseline of the item.safeIf the item overflows, aligns as start to avoid data loss.unsafeHonors the specified alignment even if the item overflows.leftFlush with the left edge — valid for justify-items only, not align-items.rightFlush with the right edge — valid for justify-items only, not align-items.legacyPropagates the value (left, right, center) to descendants via justify-self — valid for justify-items only.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
