CSS justify-items Property
Description
The justify-items property aligns all elements of the grid layout along the line axis of the grid container. In order to align all elements of the grid layout along the axis of the grid container column, you can use the align-items property. Currently, if an element is not a layout grid element (not located inside the parent element, which is a block element or a lower-case grid container), then the justify-items property will not have any effect on such an element.
- Initial value
- legacy
- Applies to
- All elements
- Inherited
- No
- Media
- Visual
- Computed value
- As specified
- Animatable
- Yes
- CSS Version
- CSS3
- JavaScript syntax
- object.style.justifyItems
Syntax
justify-items: legacy | stretch | center | start | end | baseline
Values
- legacyMakes the value inherited by the box descendants. Note that if a descendant has a justify-self: auto value, the legacy keyword is not considered by the descend, only the left, right, or center value associated to it.
- stretchElements are stretched to fit the row of the container cell. If the combined size of the elements is smaller than the size of the alignment container, all elements with automatic size are increased equally (not proportionally), while the restrictions imposed by the max-height / max-width parameter (or equivalent functionality) are observed, so that the combined size accurately fills the alignment container.
- centerElements are placed in the middle of each container cell.
- startElements are placed along the initial edge of the cells.
- endElements are placed at the end edge of the cells.
- baselineElements are located on their baseline.
Example
<body>
<div class="grid-container"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div></div>
<div class="grid-container2"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div></div>
<div class="grid-container3"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div></div>
<div class="grid-container4"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div></div>
<div class="grid-container5"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div></div>
</body>body {
display: flex;
flex-wrap: wrap;
}
.grid-container,
.grid-container2,
.grid-container3,
.grid-container4,
.grid-container5 {
display: inline-grid;
grid: auto / repeat(3, 1fr);
height: 120px;
width: 30%;
background: rgb(0,150,208);
margin: 10px;
text-align: center;
}
div > div {
background: rgb(241,101,41);
border: 1px solid;
}
.grid-container {
justify-items: stretch;
}
.grid-container2 {
justify-items: start;
}
.grid-container3 {
justify-items: end;
}
.grid-container4 {
justify-items: center;
}
.grid-container5 {
justify-items: baseline;
}Browser Support
| Desktop | |||||
 |
 |
 |
 |
 |
 |
| 11 | 12 | 52 | 20 | 12.1 | 9 |
| Tablets / Mobile | |||||
 |
|
|
|
|
 |
| 52 | 52 | 20 | 12.1 | 9.2 | X |
