W3docs
en
Log in

CSS justify-items Property

The place-items property is a shorthand for setting the align-items and justify-items CSS properties. See property values and try examples.

The justify-items property defines the default justify-self for all child boxes, giving them all a default way of justifying each box along the appropriate axis. Unlike justify-self, which targets individual items, justify-items applies to the entire container.

The justify-items property is primarily used with Grid layouts, but also applies to:

  • absolutely positioned elements
  • grid containers

Note: justify-items primarily affects grid containers and absolutely positioned elements. In flexbox layouts, this property is ignored.

Initial Valueauto
Applies toGrid containers and absolutely positioned elements.
InheritedNo.
AnimatableNo.
VersionCSS3
DOM Syntaxobject.style.justifyItems = "start";

Syntax

CSS justify-items values

justify-items: auto | normal | start | end | flex-start | flex-end | self-start | self-end | center | left | right | baseline | first-baseline | last-baseline | stretch | safe | unsafe | legacy | initial | inherit;

Example: justify-items with the "start" value

CSS justify-items code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 5px;
        justify-items: start;
        background-color: #cccccc;
      }
      #example > div {
        padding: 10px;
        font-size: 20px;
        color: white;
        width: 100px;
        height: 50px;
      }
      .one {
        background-color: #1c87c9;
      }
      .two {
        background-color: #8ebf42;
      }
      .three {
        background-color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-items property example</h2>
    <div id="example">
      <div class="one">1</div>
      <div class="two">2</div>
      <div class="three">3</div>
    </div>
  </body>
</html>
Try it Yourself »

Result

CSS justify-items start

Example: justify-items with the "center" value

CSS justify-items center example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 5px;
        justify-items: center;
        background-color: #cccccc;
      }
      #example > div {
        padding: 10px;
        font-size: 20px;
        color: white;
        width: 100px;
        height: 50px;
      }
      .one {
        background-color: #1c87c9;
      }
      .two {
        background-color: #8ebf42;
      }
      .three {
        background-color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-items property example</h2>
    <div id="example">
      <div class="one">1</div>
      <div class="two">2</div>
      <div class="three">3</div>
    </div>
  </body>
</html>
Try it Yourself »

Example: justify-items with the "first-baseline" value

Example of the justify-items property with the "first-baseline" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        display: grid;
        padding-top: 10px;
        height: 250px;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
        background: #ccc;
        justify-items: first-baseline;
      }
      .item {
        width: 50%;
        height: 50%;
        text-align: center;
      }
      .item1 {
        background: red;
      }
      .item2 {
        background: blue;
      }
      .item3 {
        background: green;
      }
    </style>
  </head>
  <body>
    <h2>Justify-items property example</h2>
    <div class="container">
      <div class="item1 item">1</div>
      <div class="item2 item">2</div>
      <div class="item3 item">3</div>
    </div>
  </body>
</html>
Try it Yourself »

Example: justify-items with the "self-end" value

Example of the justify-items property with the "self-end" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 5px;
        justify-items: self-end;
        background-color: #cccccc;
      }
      #example > div {
        padding: 10px;
        font-size: 20px;
        color: white;
        width: 100px;
        height: 50px;
      }
      .one {
        background-color: #1c87c9;
      }
      .two {
        background-color: #8ebf42;
      }
      .three {
        background-color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-items property example</h2>
    <div id="example">
      <div class="one">1</div>
      <div class="two">2</div>
      <div class="three">3</div>
    </div>
  </body>
</html>
Try it Yourself »

Values

ValueDescription
autoIf the box has no parent, or is absolutely positioned, the auto value represents normal.
normalThe effect depends on the layout mode: <br>• Block layouts: Behaves like start. <br>• Absolutely positioned layouts: Behaves like start for replaced elements, and stretch for others. <br>• Table cells: Ignored. <br>• Flexbox: Ignored. <br>• Grid layouts: Behaves like stretch, except for items with an aspect ratio or intrinsic size, where it behaves like start.
startAll elements are positioned against each other on the starting (left) edge of the container.
endAll elements are positioned against each other on the ending (right) edge of the container.
flex-startItems are placed at the beginning of the container.
flex-endItems are placed at the end of the container.
self-startItem is allowed to place itself on the container edge based on its own starting side.
self-endItem is allowed to place itself on the container edge based on its own ending side.
centerItems are positioned next to each other toward the center of the container.
leftItems are placed next to each other toward the left side of the container. If the property’s axis is not parallel with the inline axis, this value behaves like end.
rightItems are placed next to each other toward the right side of the container. If the property’s axis is not parallel with the inline axis, this value behaves like start.
baselineAligns all elements within a group by matching up their alignment baselines.
first-baselineAligns all elements within a group by matching up their first alignment baselines.
last-baselineAligns all elements within a group by matching up their last alignment baselines.
stretchStretch the element to fit the container along the inline/main axis.
safeIf the size of the item overflows the alignment container, the item is aligned as if the alignment mode is start.
unsafeRegardless of the item’s size and alignment container, the alignment value is honored.
legacyLegacy keyword for backward compatibility. Maps to flex-start, flex-end, or center depending on the layout mode. Does not affect inheritance.
initialIt makes the property use its default value.
inheritIt inherits the property from its parent element.

Practice

Practice

What does the CSS 'justify-items' property do?