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!

☕ Buy a Coffee

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

place-content: end space-between;

place-content: space-around start;

place-content: start space-evenly;

place-content: end center;

place-content: end;

One

Two

Three

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

HTML

<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>

CSS

#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; 
}

Result

Editor