place-items

The CSS place-items shorthand property allows you to align items along both the block and inline directions at once (i.e. the align-items and justify-items properties) in a relevant layout system such as Grid or Flexbox. If the second value is not set, the first value is also used for it.

Try it

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* Keyword values */
place-items: center;
place-items: normal start;

/* Positional alignment */
place-items: center normal;
place-items: start legacy;
place-items: end normal;
place-items: self-start legacy;
place-items: self-end normal;
place-items: flex-start legacy;
place-items: flex-end normal;
place-items: left legacy;
place-items: right normal;

/* Baseline alignment */
place-items: baseline normal;
place-items: first baseline legacy;
place-items: last baseline normal;
place-items: stretch legacy;

/* Global values */
place-items: inherit;
place-items: initial;
place-items: revert;
place-items: revert-layer;
place-items: unset;

Values

One of the following forms:

  • A single align-items value, which is used to set alignment in both block and inline directions.
  • An align-items value, which sets alignment in the block direction, followed by a justify-items value, which sets alignment in the inline direction.

Formal definition

Initial valueas each of the properties of the shorthand:
Applies toall elements
Inheritedno
Computed valueas each of the properties of the shorthand:
Animation typediscrete

Formal syntax

place-items = 
<'align-items'> <'justify-items'>?

Examples

Placing items in a flex container

In flexbox justify-self or justify-items do not apply, as on the main axis items are treated as a group. Therefore, the second value will be ignored.

CSS

#container {
  height:200px;
  width: 240px;
  place-items: stretch; /* You can change this value by selecting another option in the list */
  background-color: #8c8c8c;
  display: flex;
}

Result

Placing items in a grid container

The following grid container has items which are smaller than the grid areas they are placed in, therefore place-items will move them in the block and inline dimensions.

CSS

#gridcontainer {
  height:200px;
  width: 240px;
  place-items: stretch; /* You can change this value by selecting another option in the list */
  background-color: #8c8c8c;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

#gridcontainer > div {
  width: 50px;
}

Result

Specifications

Specification
CSS Box Alignment Module Level 3
# place-items-property

Browser compatibility

BCD tables only load in the browser

See also