CSS place-items Property
Example
Place each <div> element at the start of its grid cell in the inline and block directions:
#container {
place-items: start;
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The place-items
property is used in grid layout, and is a shorthand property for the following properties:
If the place-items property has two values:
- place-items: start center;
- align-items property value is 'start'
- justify-items property value is 'center'
If the place-items property has one value:
- place-items: end;
- align-items and justify-items property values are both 'end'
Default value: | normal legacy |
---|---|
Inherited: | no |
Animatable: | no. Read about animatable |
Version: | CSS3 |
JavaScript syntax: | object.style.placeItems="stretch center" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Property | |||||
---|---|---|---|---|---|
place-items | 59.0 | 79.0 | 45.0 | 11.0 | 46.0 |
CSS Syntax
place-items: normal legacy|value|initial|inherit;
Property Values
Value | Description | Demo |
---|---|---|
normal legacy | Default. The element's default place-items value. The default value for align-items is 'normal', and the default value for justify-items is 'legacy'. | Demo ❯ |
baseline | Items are positioned at the baseline of the container | Demo ❯ |
center | Align items to the center of the grid cell | Demo ❯ |
end | Align items at the end of the grid cell | Demo ❯ |
start | Align items at the start of the grid cell | Demo ❯ |
stretch | Stretches grid items to fill the grid container if the grid item sizes are not set. | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
More Examples
Writing-mode
With the writing-mode
property value of the grid container set to 'vertical-rl', the end in block direction is moved from bottom to left, and the end in inline direction is moved from right to bottom side:
#container {
place-items: end;
writing-mode: vertical-rl;
}
Try it Yourself »
Flexbox
The justify-items
property is not relevant for flexbox. So if the place-items
property is used in flexbox layout, the value for justify-items (the second value) is ignored.
#wrapper {
place-items: stretch end;
}
Try it Yourself »
Related Pages
CSS tutorial: CSS grid
CSS tutorial: CSS flexbox
CSS align-items property: CSS align-items property
CSS justify-items property: CSS justify-items property
CSS writing-mode property: CSS Writing-mode property