The place-items CSS property is a shorthand property that combines the align-items and justify-items 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-items property accepts two values, which represent the alignment and positioning of items along the block and inline axes, respectively. The values can be specified in any order, separated by a space.
Here are some commonly used values:
-
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 block and inline axes. -
stretch: Stretches items to fill the entire container. -
baseline: Aligns items along their baseline.
Here’s an example in a grid container:
.container {
display: grid;
place-items: center stretch;
}
In this example, the .container class sets a grid container and uses place-items: center stretch;. This centers the grid items both horizontally and vertically within their cells, and stretches the items to fill the entire cell.
You can mix and match the available values of place-items 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 block and inline alignment properties at once, reducing the need for separate align-items and justify-items declarations.
The place-items property is particularly useful when working with CSS Grid and Flexbox layouts, allowing you to easily control the alignment and positioning of items within their container, improving the overall design and layout of your webpage.