CSS justify-items Property

Description

The justify-items property sets the default inline-axis alignment for a container’s children, determining how each child is placed within its own alignment container (for example, a grid cell). In practice this means it controls the position of an item inside the space allocated to it rather than changing the distribution of free space between items. It establishes a baseline behavior for all items so you can ensure consistent alignment across a whole layout without setting alignment on every item individually.

Because it supplies a default per-item alignment, the value set on the container can be overridden by per-item controls. For example, an individual item’s alignment can supersede the container’s default via justify-self, while the overall distribution of tracks or items within the whole container is handled separately by justify-content. There is also a shorthand that pairs inline and block alignment so you can set both axes together with place-items.

The direction that justify-items operates along is the inline axis, which depends on writing mode and directionality; in left-to-right horizontal writing it aligns items left/right/center within their slot, but in vertical or right-to-left flows the inline axis changes accordingly. It interacts with other alignment concepts: the container-level cross-axis default is governed by align-items, and an individual item can override the default along the block axis with align-self. Note that some layout systems only honor certain alignment properties (for example, Grid fully supports per-item alignment, while other formatting contexts may ignore justify-items).

In practical use, set justify-items on a parent when you want a consistent inline-axis placement for many children and prefer not to manage each child independently. When fine-grained control is required for specific items, use the per-item override (justify-self) for those few exceptions. Also be mindful that behaviors like auto margins and intrinsic sizing can affect or override alignment in specific circumstances, so test alignment outcomes across different content sizes and writing modes.

Definition

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

<section class="example">

  <h2>justify-items: start</h2>

  <div class="grid grid-start">

    <div class="item">A</div>

    <div class="item">B</div>

    <div class="item">C</div>

  </div>

</section>



<section class="example">

  <h2>justify-items: center</h2>

  <div class="grid grid-center">

    <div class="item">A</div>

    <div class="item">B</div>

    <div class="item">C</div>

  </div>

</section>



<section class="example">

  <h2>justify-items: stretch</h2>

  <div class="grid grid-stretch">

    <div class="item">A</div>

    <div class="item">B</div>

    <div class="item">C</div>

  </div>

</section>

CSS

/* Basic page styles */
* {
  box-sizing: border-box;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

body {
  margin: 0;
  padding: 18px;
  background: #f6f8fa;
  color: #111;
}

.example {
  margin-bottom: 28px;
}

h2 {
  font-size: 15px;
  margin: 0 0 10px;
  font-weight: 600;
  color: #333;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 120px);
  gap: 12px;
  padding: 12px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e6e9ec;
  align-items: center; /* vertical alignment */
  height: 100px;
  width: 420px; 
  max-width: 100%;
}

.grid-start { justify-items: start; }
.grid-center { justify-items: center; }
.grid-stretch { justify-items: stretch; }

.item {
  width: 60px;
  height: 40px;
  background: linear-gradient(180deg,#e9f2ff,#cfe6ff);
  border: 1px solid #b6d0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-weight: 700;
  color: #034;
}
.grid-stretch .item {
  width: auto;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS justify-items property. Hover over a browser icon to see the version that first introduced support for this CSS property.