レイアウト
place-content
place-content は、align-content（行のまとまりの縦の位置）と justify-content（列のまとまりの横の位置）をまとめて書くショートハンドです。箱の中で余った空きに、中身をまとめてどう置くかを決めます。
構文
<'align-content'> <'justify-content'>?プレビュー
コード
.box {
display: grid;
grid-template-columns: 3em 3em;
place-content: center;
}コントロール
解説
値の書き方
align-content の値、justify-content の値の順にスペースで区切って書きます（place-content: start space-between）。1 つだけ書くと、両方に同じ値が使われます。ただし、1 つだけ書いた値が baseline か last baseline のときは、justify-content には start が使われます（justify-content には baseline を書けないため）。
place-items との違い
place-items は項目をそれぞれのマスの中で動かし、place-content は列や行をまとめて箱の中で動かします。グリッドの列や行の合計が箱より小さいときに、余った空きのどこに置くかを決めるのが place-content です。列や行が 1fr で箱いっぱいに広がっているときは、余りが無いので何も変わりません。
このページのプレビューは、補助の宣言で display: grid と grid-template-columns: 3em 3em にして、箱より小さい 2 列 2 行のグリッドを作っています。行は中身の高さです。
フレックスボックスでは
フレックスボックスでも使えます。2 つ目の値（justify-content）は主軸（横に並べたときは横）の並べ方、1 つ目の値（align-content）は折り返した行のまとまりの並べ方です。折り返さない 1 行のフレックスボックスでは、align-content は効きません。