CSS place-items Property
Description
The place-items
CSS property is a shorthand property that allows you to align both the items along the block (column) axis and inline (row) axis within a grid or flex container. It combines the align-items property, which controls vertical alignment, and the justify-items property, which controls horizontal alignment, into a single declaration. This property simplifies the alignment of all items within a container, making it easier to achieve consistent and aesthetically pleasing layouts in web design. Individual properties are: align-items properties and justify-items.
- Initial value
- See individual properties
- Applies to
- All elements
- Inherited
- No
- Computed value
- See individual properties
- Animatable
- Yes
- JavaScript syntax
- object.style.placeItems
Interactive Demo
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
The following table will show you the current browser support for the CSS place-items
property.
Desktop | |||||
79 | 59 | 45 | 46 | 11 |
Tablets / Mobile | |||||
59 | 45 | 43 | 11 | 7 | 59 |
Last updated by CSSPortal on: 3rd January 2024