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:
place-items : center;
place-items : normal start;
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;
place-items : baseline normal;
place-items : first baseline legacy;
place-items : last baseline normal;
place-items : stretch legacy;
place-items : inherit;
place-items : initial;
place-items : revert;
place-items : revert-layer;
place-items : unset;
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.
place-items = <'align-items'> <'justify-items'> ? 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.
div > div {
box-sizing : border-box;
border : 2px solid #8c8c8c;
width : 50px;
display : flex;
align-items : center;
justify-content : center;
}
#item1 {
background-color : #8cffa0;
min-height : 30px;
font-size : 2em;
}
#item2 {
background-color : #a0c8ff;
min-height : 50px;
}
#item3 {
background-color : #ffa08c;
min-height : 40px;
}
#item4 {
background-color : #ffff8c;
min-height : 60px;
}
#item5 {
background-color : #ff8cff;
min-height : 70px;
}
#item6 {
background-color : #8cffff;
min-height : 50px;
}
select {
font-size : 16px;
}
.row {
margin-top : 10px;
}
< div id = " container" >
< div id = " item1" > 1</ div>
< div id = " item2" > 2</ div>
< div id = " item3" > 3</ div>
</ div>
< div class = " row" >
< label for = " values" > place-items: </ label>
< select id = " values" >
< option value = " stretch" > stretch</ option>
< option value = " start" > start</ option>
< option value = " center" > center</ option>
< option value = " end" > end</ option>
< option value = " left" > left</ option>
< option value = " right" > right</ option>
< option value = " auto center" > auto center</ option>
< option value = " normal start" > normal start</ option>
< option value = " center normal" > center normal</ option>
< option value = " start auto" > start auto</ option>
< option value = " end normal" > end normal</ option>
< option value = " self-start auto" > self-start auto</ option>
< option value = " self-end normal" > self-end normal</ option>
< option value = " flex-start auto" > flex-start auto</ option>
< option value = " flex-end normal" > flex-end normal</ option>
< option value = " left auto" > left auto</ option>
< option value = " right normal" > right normal</ option>
< option value = " baseline normal" > baseline normal</ option>
< option value = " first baseline auto" > first baseline auto</ option>
< option value = " last baseline normal" > last baseline normal</ option>
< option value = " stretch auto" > stretch auto</ option>
</ select>
</ div>
const values = document. getElementById ( "values" ) ;
const container = document. getElementById ( "container" ) ;
values. addEventListener ( "change" , ( evt ) => {
container. style. placeItems = evt. target. value;
} ) ;
CSS
#container {
height : 200px;
width : 240px;
place-items : stretch;
background-color : #8c8c8c;
display : flex;
}
Result
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.
div > div {
box-sizing : border-box;
border : 2px solid #8c8c8c;
}
#item1 {
background-color : #8cffa0;
min-height : 30px;
font-size : 2em;
}
#item2 {
background-color : #a0c8ff;
min-height : 50px;
}
#item3 {
background-color : #ffa08c;
min-height : 40px;
}
#item4 {
background-color : #ffff8c;
min-height : 60px;
}
#item5 {
background-color : #ff8cff;
min-height : 70px;
}
#item6 {
background-color : #8cffff;
min-height : 50px;
}
select {
font-size : 16px;
}
.row {
margin-top : 10px;
}
< div id = " gridcontainer" >
< div id = " item1" > 1</ div>
< div id = " item2" > 2</ div>
< div id = " item3" > 3</ div>
< div id = " item4" > 4</ div>
< div id = " item5" > 5</ div>
</ div>
< div class = " row" >
< label for = " gridvalues" > place-items: </ label>
< select id = " gridvalues" >
< option value = " stretch" > stretch</ option>
< option value = " start" > start</ option>
< option value = " center" > center</ option>
< option value = " end" > end</ option>
< option value = " left" > left</ option>
< option value = " right" > right</ option>
< option value = " auto center" > auto center</ option>
< option value = " normal start" > normal start</ option>
< option value = " center normal" > center normal</ option>
< option value = " start auto" > start auto</ option>
< option value = " end normal" > end normal</ option>
< option value = " self-start auto" > self-start auto</ option>
< option value = " self-end normal" > self-end normal</ option>
< option value = " flex-start auto" > flex-start auto</ option>
< option value = " flex-end normal" > flex-end normal</ option>
< option value = " left auto" > left auto</ option>
< option value = " right normal" > right normal</ option>
< option value = " baseline normal" > baseline normal</ option>
< option value = " first baseline auto" > first baseline auto</ option>
< option value = " last baseline normal" > last baseline normal</ option>
< option value = " stretch auto" > stretch auto</ option>
</ select>
</ div>
const values = document. getElementById ( "gridvalues" ) ;
const container = document. getElementById ( "gridcontainer" ) ;
values. addEventListener ( "change" , ( evt ) => {
container. style. placeItems = evt. target. value;
} ) ;
CSS
#gridcontainer {
height : 200px;
width : 240px;
place-items : stretch;
background-color : #8c8c8c;
display : grid;
grid-template-columns : repeat ( 3, 1fr) ;
}
#gridcontainer > div {
width : 50px;
}
Result
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.