The justify-items property sets the alignment of individual items along the inline axis (or cross axis) of their cell. Unlike justify-content (which aligns the whole group), justify-items aligns each item within its own cell. Default legacy preserves backward compatibility..grid {
justify-items: center;
}.dashboard {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: start;
}legacyBackward compat — defers to text-align in some cases (default).normalContainer default (stretch in grid, start in block).stretchItems stretch to fill the cell.startItems aligned to the start of the cell.endItems aligned to the end of the cell.centerItems centered within the cell.leftItems aligned to the physical left.rightItems aligned to the physical right.baseline: items aligned to the baseline.first baseline: items aligned to the first baseline of the group.last baseline: items aligned to the last baseline of the group.flex-startItems aligned to the flex start edge (equivalent to start in grid).flex-endItems aligned to the flex end edge (equivalent to end in grid).self-startEach item aligned to the start of the cell relative to its own writing direction.self-endEach item aligned to the end of the cell relative to its own writing direction.anchor-centerItems centered relative to their anchor element (anchor positioning).CSS Box Alignment Module Level 3Editor's DraftW3CMDNCSSCSSCSSShow all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationsourcesvisual demonstrationpreviousnext
