CSS justify-items Property


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
Applies to
All elements
Computed value
As specified
JavaScript syntax

Interactive Demo



justify-items: legacy | stretch | center | start | end | baseline


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


<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 {
  display: flex;
  flex-wrap: wrap;
.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

The following table will show you the current browser support for the CSS justify-items property.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 2nd January 2024