CSS place-content Property
Description
The place-content
CSS property is a shorthand property that allows you to align both the items and the content inside a grid or flex container simultaneously. It combines the align-content and justify-content properties into a single declaration, making it more convenient to control the placement of items within a container along both the horizontal and vertical axes. This property is particularly useful for creating responsive and well-organized layouts in web design, as it simplifies the management of content alignment in flexbox and grid-based designs. Individual properties are: align-content properties and justify-content.
- Initial value
- normal
- Applies to
- Multi-line flex containers
- Inherited
- No
- Computed value
- As specified
- Animatable
- No
- JavaScript syntax
- object.style.placeContent
Interactive Demo
Syntax
place-content: <align-content> <justify-content> ?
Values
- <align-content>See align-content CSS property for values.
- <justify-content>See justify-content CSS property for values.
Example
<body>
place-content:
<select id="alignContentControl">
<option value="stretch">stretch</option>
<option value="flex-start">flex-start</option>
<option value="flex-end">flex-end</option>
<option value="center">center</option>
<option value="space-between">space-between</option>
<option value="space-around">space-around</option>
<option value="space-evenly">space-evenly</option>
</select>
<select id="justifyContentControl">
<option value="flex-start">flex-start</option>
<option value="flex-end">flex-end</option>
<option value="center">center</option>
<option value="space-between">space-between</option>
<option value="space-around">space-around</option>
<option value="space-evenly">space-evenly</option>
</select>
<div id="flex-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("flex-container");
alignContentControl = document.getElementById("alignContentControl");
justifyContentControl = document.getElementById("justifyContentControl");
updateAlignment = function() {
container.style.placeContent = alignContentControl.value + " " + justifyContentControl.value;
}
alignContentControl.addEventListener("change", updateAlignment);
justifyContentControl.addEventListener("change", updateAlignment);
</script>
</body>
#flex-container {
display: flex;
flex-wrap: wrap;
height: 300px;
background: rgb(0,150,208);
margin: 10px;
text-align: center;
}
div > div {
width: 20%;
background: rgb(241,101,41);
border: 1px solid;
}
Browser Support
The following table will show you the current browser support for the CSS place-content
property.
Desktop | |||||
79 | 59 | 45 | 46 | 9 |
Tablets / Mobile | |||||
59 | 45 | 43 | 9 | 7 | 59 |
Last updated by CSSPortal on: 3rd January 2024