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.
This property is a shorthand for the following CSS properties:
/* Keyword values */ place-items: auto center; place-items: normal start; /* Positional alignment */ place-items: center normal; place-items: start auto; place-items: end normal; place-items: self-start auto; place-items: self-end normal; place-items: flex-start auto; place-items: flex-end normal; place-items: left auto; place-items: right normal; /* Baseline alignment */ place-items: baseline normal; place-items: first baseline auto; place-items: last baseline normal; place-items: stretch auto; /* Global values */ place-items: inherit; place-items: initial; place-items: unset;
auto
justify-items
property of the parents box, unless the box has no parent, or is absolutely positioned, in these cases, auto
represents normal
.normal
start
.start
on replaced absolutely-positioned boxes, and as stretch
on all other absolutely-positioned boxes.stretch
, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like start
.start
end
flex-start
start
.flex-end
end
.self-start
self-end
center
left
start
.right
start
.baseline
first baseline
last baseline
first baseline
is start
, the one for last baseline
is end
.stretch
auto
-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height
/max-width
(or equivalent functionality), so that the combined size exactly fills the alignment container.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 |
<'align-items'> <'justify-items'>?
#container { height:200px; width: 240px; place-items: center; /* You can change this value by selecting another option in the list */ background-color: #8c8c8c; } .flex { display: flex; flex-wrap: wrap; } .grid { display: grid; grid-template-columns: repeat(auto-fill, 50px); }
Specification | Status | Comment |
---|---|---|
CSS Box Alignment Module Level 3 The definition of 'place-items' in that specification. | Working Draft | Initial definition |
Desktop | ||||||
---|---|---|---|---|---|---|
Supported in Flex Layout | 59 | 79 | 45 | No | 46 | 11 |
Supported in Grid Layout | 59 | 79 | 45 | No | 46 | 11 |
Mobile | ||||||
---|---|---|---|---|---|---|
Supported in Flex Layout | 59 | 59 | 45 | 43 | 11 | 7.0 |
Supported in Grid Layout | 59 | 59 | 45 | 43 | 11 | 7.0 |
align-items
propertyalign-self
propertyjustify-items
propertyjustify-self
property
© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/place-items