CSS place-items Property
Description
The place-items property aligns all elements of the grid layout along the column axis and the row axis of the grid container (this is a shorthand property for align-items properties and justify-items ).
- Initial value
- See individual properties
- Applies to
- All elements
- Inherited
- No
- Media
- Visual
- Computed value
- See individual properties
- Animatable
- Yes
- CSS Version
- CSS3
- JavaScript syntax
- object.style.placeItems
Syntax
place-items: <align-items> <justify-items>?
Values
- <align-items>See align-items CSS property for values.
- <justify-items>See justify-items CSS property for values.
Example
<body>
place-items:
<select id="alignItemsControl">
<option value="stretch">stretch</option>
<option value="start">start</option>
<option value="end">end</option>
<option value="center">center</option>
<option value="baseline">baseline</option>
</select>
<select id="justifyItemsControl">
<option value="stretch">stretch</option>
<option value="start">start</option>
<option value="end">end</option>
<option value="center">center</option>
<option value="baseline">baseline</option>
</select>
<div id="grid-container"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div><div>G</div><div>H</div></div>
<script>
const container = document.getElementById("grid-container");
alignItemsControl = document.getElementById("alignItemsControl");
justifyItemsControl = document.getElementById("justifyItemsControl");
updateAlignment = function() {
container.style.placeItems = alignItemsControl.value + " " + justifyItemsControl.value;
}
alignItemsControl.addEventListener("change", updateAlignment);
justifyItemsControl.addEventListener("change", updateAlignment);
</script>
</body>#grid-container {
display: grid;
grid: auto / repeat(4, 40px);
height: 120px;
background: rgb(0,150,208);
margin-top: 15px;
text-align: center;
}
div > div {
background: rgb(241,101,41);
border: 1px solid;
} Browser Support
| Desktop | |||||
 |
 |
 |
 |
 |
 |
| X | X | 59 | 45 | 46 | 11 |
| Tablets / Mobile | |||||
 |
|
|
|
|
 |
| 59 | 59 | 45 | X | 11 | 7.0 |
