justify-items
Aligns grid items horizontally inside their cells.
Syntax
justify-items: value;Values
| Parameter | Type | Description |
|---|---|---|
| stretch | keyword | Stretched across the cell (the default). |
| start | center | end | keyword | At the start, in the center or at the end of the cell. |
Examples
Items at the start and in the center of their cells:
<style>
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: whitesmoke; }
.grid div { padding: 6px; background: lightcoral; }
</style>
<div class="grid" style="justify-items: start;"><div>start</div><div>start</div></div>
<p></p>
<div class="grid" style="justify-items: center;"><div>center</div><div>center</div></div>Notes
justify-items is set on the grid container; justify-self overrides it for one item. Flexbox ignores this property.
See also
- place-items — Sets `align-items` and `justify-items` at once.
- align-self — Aligns one item across the main axis, overriding the container's `align-items`.
- align-items — Aligns items across the main axis — vertically in a row.
In the tutorial
- Grid — CSS Grid — columns and rows, the fr unit, the repeat and minmax functions, gaps and a responsive grid without media queries.