The CSS justify-items property sets how grid items align along the row axis within their columns. Think of it as choosing where each item sits inside its column: beginning, end, middle, or stretched across it. section 13.9
Choose one of four alignment values:
- start places each item at the beginning of its column. section 13.9
- end places each item at the end of its column. section 13.9
- center places each item in the middle of its column. section 13.9
- stretch expands items across their columns; this is the default, so declaring it is optional. section 13.9
A centered grid-item alignment
container { display: grid; justify-items: center; } section 13.9
container {
display: grid;
justify-items: start|end|center|stretch;
}
Try start, end, center, and stretch in a compact grid-container declaration. section 13.9
To make one item disobey the group setting, use justify-self on that item; it accepts the same values. section 13.9
