CSS place-content Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

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