W3cubDocs

/CSS

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;

/* 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 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

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/place-items