CSS justify-items Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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
Computed value: As specified
Animatable: Yes
JavaScript syntax: object.style.justifyItems

Interactive Demo

justify-items: stretch;

justify-items: center;

justify-items: start;

justify-items: end;

One

Two

Three

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

HTML

<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>

CSS

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;
}

Result

Editor