CSS place-items property

Previous Page place-content
Next Page place-self

Definition and Usage

place-items This attribute is used for grid layout and is a shorthand for the following attributes:

align-items
justify-items

If the place-items attribute has two values:

place-items: start center;

The value of the align-items attribute is 'start'
The value of the justify-items attribute is 'center'

If the place-items attribute has only one value:

place-items: end;

then the values of the align-items and justify-items attributes are both 'end'

Instance

Example 1

Places each <div> element at the start position of the inline direction and block direction of its grid cell:

#container {
  place-items: start;
}

Try It Yourself

Example 2: Writing Mode

When the grid container's writing-mode When the attribute value is set to 'vertical-rl', the end position of the block direction moves from the bottom to the left, and the end position of the inline direction moves from the right to the bottom:

#container {
  place-items: end;
  writing-mode: vertical-rl;
}

Try It Yourself

Example 3: Flexbox Layout

justify-items Attribute is not applicable to flexbox layout. Therefore, if you use place-items Attributejustify-items The value (i.e., the second value) will be ignored.

#wrapper {
  place-items: stretch end;
}

Try It Yourself

CSS Syntax

place-items: normal legacy|Value|initial|inherit;

Attribute Value

Value	Description
normal legacy	Default The default value of align-items is 'normal', and the default value of justify-items is 'legacy'.
baseline	The item is positioned on the baseline of the container.
center	Aligns the item to the center of the grid cell.
end	Aligns the item to the end position of the grid cell.
start	Aligns the item to the start position of the grid cell.
stretch	If the size of the grid item is not set, stretch the grid item to fill the grid container.
initial	Sets this property to its default value. See initial.
inherit	Inherits this property from its parent element. See inherit.

Technical Details

Default Value:	normal legacy
Inheritance:	No
Animation Creation:	Not supported. See:Animation-related Properties.
Version:	CSS3
JavaScript Syntax:	object.style.placeItems="stretch center"