Layout
place-content
place-content is a shorthand for align-content (vertical position of the rows as a group) and justify-content (horizontal position of the columns as a group). It decides where the content as a whole goes in the space left over in the box.
Syntax
<'align-content'> <'justify-content'>?Preview
Code
.box {
display: grid;
grid-template-columns: 3em 3em;
place-content: center;
}Controls
About
Values
Write the align-content value and then the justify-content value, separated by a space (place-content: start space-between). With one value, both get it, except that a single baseline or last baseline gives justify-content start (justify-content does not take baseline values).
How it differs from place-items
place-items moves each item inside its cell, while place-content moves the columns and rows together inside the box. When the grid's columns or rows add up to less than the box, place-content decides where they go in the leftover space. When 1fr tracks already fill the box, there is nothing left over and nothing changes.
The preview on this page sets display: grid and grid-template-columns: 3em 3em as helper declarations, making a grid of two columns and two rows that is smaller than the box. The rows are as tall as their content.
In a flexbox
It works in flexbox too. The second value (justify-content) arranges items along the main axis (across, for a row), and the first value (align-content) arranges wrapped lines as a group. In a single-line flexbox that does not wrap, align-content has no effect.