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
