place-items

レイアウト・配置

align-itemsとjustify-itemsを一括で設定するショートハンドプロパティです。Grid/Flexboxで中央配置が簡単になります。

構文

Syntax

place-items: <align-items> <justify-items>

.grid-container {
  display: grid;
  place-items: center;
}

実行結果

place-items: center - 水平・垂直中央配置

Item 1

Item 2

Item 3

💡 各グリッドセル内でアイテムが中央配置される

グリッドアイテムを中央配置

place-items: start end;

実行結果

place-items: start end - 垂直方向は上、水平方向は右

Item 1

Item 2

💡 align-items: start + justify-items: end の組み合わせ

垂直方向は開始、水平方向は終端に配置

1つの値で両方向、2つの値で個別指定。中央配置の最短記法。

Chrome 59+, Firefox 45+, Safari 11+