The place-content CSS property is a shorthand property that combines the align-content and justify-content properties. It is used in CSS Grid and CSS Flexbox layouts to control the alignment and positioning of the grid or flex items within their container both horizontally and vertically.
The place-content property accepts various values that can be specified in any order, separated by a space:
-
start: Aligns items to the start edge of the container. -
end: Aligns items to the end edge of the container. -
center: Centers items along both the horizontal and vertical axes. -
stretch: Stretches items to fill the entire container. -
space-between: Distributes items evenly along the main axis, with the first item at the start edge and the last item at the end edge. -
space-around: Distributes items evenly along the main axis, with equal space before the first item and after the last item. -
space-evenly: Distributes items evenly along the main axis, with equal space between all items.
Here’s an example in a flex container:
.container {
display: flex;
place-content: center space-between;
}
In this example, the .container class sets a flex container and uses place-content: center space-between;. This aligns the flex items both horizontally and vertically at the center of the container, with equal space between the items.
You can mix and match the available values of place-content to achieve the desired alignment and positioning of the grid or flex items within their container. It provides a convenient way to set both the horizontal and vertical alignment properties at once, reducing the need for separate align-content and justify-content declarations.
The place-content property is particularly useful when working with CSS Grid and Flexbox layouts, allowing you to easily control the positioning and alignment of items within their container, improving the overall design and layout of your webpage.