CSS Property: place-content

The place-content property is used in flexbox and grid layouts and is a shorthand property for align-content and justify-content properties.

If the property has two values: place-content: start center;

center	The justify-content property value is CENTER.
start	The align-content property value is START.

If the property has one value: place-content: end;

end	Both align-content and justify-content values are END.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>place-content</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        * {
            box-sizing: border-box;
        }
        .container1, .container2 {
            display: flex;
            flex-wrap: wrap;
            width: 300px;
            height: 300px;
            color: #333333;
            margin-bottom: 20px;
            border: 2px solid black;
        }
        .container1 {
            place-content: center;
        }
        .container2 {
            place-content: stretch;
        }
        .container1 > div, .container2 > div {
            width: 60px;
            height: 60px;
            margin: 5px;
            border: 1px solid black;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }
        .container1 > div {
            background: #ffeb3b;
        }
        .container2 > div {
            background: #ffa726;
            flex: 1 1 auto;
        }
    </style>
</head>
<body>
<h3>place-content: center;</h3>
<div class="container1">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

<h3>place-content: stretch;</h3>
<div class="container2">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>
</body>
</html>

RESULT

baseline	Aligns the first and last elements.	See example
center	Aligns elements in the center of the container.	See example
end	Aligns elements at the end of the container.	See example
flex-end	Aligns elements at the end of the container and only applies to flexbox elements.	See example
flex-start	Aligns elements at the start of the container and only applies to flexbox elements.	See example
normal	Depends on the layout context.	See example
space-around	Evenly distributes available space around each element within the container.	See example
space-between	Evenly distributes available extra space between elements within the container.	See example
space-evenly	Evenly distributes elements within the container along both axes.	See example
start	Aligns elements at the start of the container.	See example
stretch	Stretches grid elements to fill the container if size is not set.	See example