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

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

Browser Support

Desktop

11	12	52	20	12.1	9

Tablets / Mobile

52	52	20	12.1	9	6.0

Last updated by CSSPortal on: 6th November 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu