W3docs
en
Log in

CSS place-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 CSS place-items property is a shorthand for the following properties:

These properties are primarily used with Grid layouts and absolutely positioned elements. Note that place-items is ignored in Flexbox layouts and does not affect standard block-level boxes or table cells.

Info

The place-items property behaves differently depending on the user context.

Read about the behavior of the place-items property in different contexts below.

Initial Valuenormal legacy
Applies toAll elements.
InheritedNo.
AnimatableNo.
VersionCSS3
DOM Syntaxobject.style.placeItems = "normal";

Syntax

CSS place-items syntax

place-items: <align-items> [ / <justify-items> ]?;
/* Expanded values */
place-items: auto | normal | start | end | flex-start | flex-end | self-start | self-end | center | left | right | baseline | first baseline | last baseline | stretch | initial | inherit;

Note: When using a single value, it applies to both axes. When using two values separated by a slash (/), the first value sets align-items and the second sets justify-items.

Example of the place-items property:

CSS place-items code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #container {
        height: 150px;
        width: 150px;
        place-items: flex-end;
        background-color: #ccc;
        display: grid;
      }
      .grid {
        display: grid;
      }
      div > div {
        box-sizing: border-box;
        border: 1px solid #666;
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #box1 {
        background-color: #1c87c9;
        min-height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Place-items property example</h2>
    <h3>place-items: flex-end</h3>
    <div id="container" class="grid">
      <div id="box1">1</div>
    </div>
  </body>
</html>
Try it Yourself »

Result

SS place-items another

Example of the place-items property with the "center" value:

CSS place-items another code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
    <style>
      #container {
        height: 200px;
        width: 230px;
        place-items: center;
        background-color: #ccc;
        display: grid;
      }
      .grid {
        display: grid;
      }
      div > div {
        box-sizing: border-box;
        border: 3px solid #ccc;
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #box1 {
        background-color: #666;
        min-height: 40px;
      }
      #box2 {
        background-color: #1c87c9;
        min-height: 50px;
      }
      #box3 {
        background-color: #fff;
        min-height: 40px;
      }
      #box4 {
        background-color: #ff0000;
        min-height: 60px;
      }
      #box5 {
        background-color: #eee;
        min-height: 70px;
      }
      #box6 {
        background-color: #8ebf42;
        min-height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Place-items property example</h2>
    <div id="container" class="grid">
      <div id="box1">1</div>
      <div id="box2">2</div>
      <div id="box3">3</div>
      <div id="box4">4</div>
      <div id="box5">5</div>
      <div id="box6">6</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 of this value depends on the layout mode: - In block-level layouts "normal" value behaves like "start". - In absolutely-positioned layouts, this value behaves like "start" on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes. - In table cell layouts, this property is ignored. - In flexbox layouts, this property is ignored. - In grid layouts, this value behaves like "stretch", except for boxes with an aspect ratio or an intrinsic sizes 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 a "start".
baselineAligns all elements within a group by matching up their alignment baselines.
first baselineAligns the first baseline of the element with the first baseline of the row.
last baselineAligns the last baseline of the element with the last baseline of the row.
stretchStretch the element to both edges of the container vertically and horizontally to fit the container.
initialIt makes the property use its default value.
inheritIt inherits the property from its parents element.

Practice

Practice

What does the 'place-items' property in CSS do?