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
Explorer Edge Chrome Firefox Opera Safari
1112522012.19
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
52522012.19.2X