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

One
Two
Three

Syntax

place-content: <align-content> <justify-content> ?

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
Edge Chrome Firefox Opera Safari
795945469
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
5945439759

Last updated by CSSPortal on: 3rd January 2024