The justify-self property sets the alignment of an individual item along the inline axis of its grid cell/block container, overriding the parent's justify-items. Lets each item align differently from the group..item {
justify-self: end;
}.grid > .featured {
justify-self: stretch;
grid-column: 1 / -1;
}autoInherits from parent's justify-items (default).normalContainer default.stretchItem stretches to fill the cell.startItem aligned to the start of the cell.endItem aligned to the end of the cell.centerItem centered within the cell.leftItem aligned to the physical left.rightItem aligned to the physical right.baseline: item aligned to the baseline.first baseline: item aligned to the first baseline of the group.last baseline: item aligned to the last baseline of the group.flex-startItem aligned to the flex start edge (equivalent to start in grid).flex-endItem aligned to the flex end edge (equivalent to end in grid).self-startItem aligned to the start of the cell relative to its own writing direction.self-endItem aligned to the end of the cell relative to its own writing direction.anchor-centerItem centered relative to its anchor element (anchor positioning).CSS Box Alignment Module Level 3Editor's DraftW3CMDNCSSCSSCSSCSSCSSCSSCSSCSSCSSShow all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationsourcesvisual demonstrationpreviousnext
