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:

Formal definition

Initial value as each of the properties of the shorthand:
Applies to all elements
Inherited no
Computed value as each of the properties of the shorthand:
Animation type discrete

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

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
place-items
59
79
45
No
46
11
59
59
45
43
11
7.0
flex_context
59
79
45
No
46
11
59
59
45
43
11
7.0
grid_context
59
79
45
No
46
11
59
59
45
43
11
7.0

See also

https://developer.mozilla.org/en-US/docs/Web/CSS/place-items