CSSのplace-itemsでグリッドやフレックスコンテナ内のアイテムの配置を一括指定する方法をわかりやすく解説

2024.09.14
スポンサーリンク

place-itemsプロパティは、グリッドコンテナやフレックスコンテナ内の各アイテムの配置を、縦方向と横方向で同時に設定するために使用されます。

スポンサーリンク

place-itemsプロパティの値とその効果の一覧

  • place-items: center; – アイテムを中央に配置します。
  • place-items: start; – アイテムを開始位置に配置します。
  • place-items: end; – アイテムを終了位置に配置します。

注意点や関連情報

place-itemsプロパティは、align-itemsとjustify-itemsを組み合わせたショートハンドプロパティです。個別に設定する場合は、これらのプロパティを使うことができます。グリッドレイアウトとフレックスレイアウトの両方で使用可能です。

place-itemsが効かない時の原因と対策

親要素がgridまたはflexコンテナでない

place-itemsはgridやflexコンテナに適用されるプロパティです。親要素にdisplay: gridやdisplay: flexが設定されていない場合、このプロパティは効果を発揮しません。

対策: place-itemsを使用する要素の親にdisplay: gridやdisplay: flexを指定します。例えば、display: grid;を指定してからplace-itemsを適用します。

align-itemsとjustify-itemsが個別に設定されている

place-itemsはalign-itemsとjustify-itemsのショートハンドですが、これらが個別に設定されていると、place-itemsが効果を発揮しないことがあります。

対策: 個別に設定されているalign-itemsやjustify-itemsのプロパティを確認し、place-itemsを適用する際は、これらの個別プロパティを削除して、place-itemsに統一します。

共通するCSSコード

.css-sample-container {
      display: grid;
      height: 300px;
      width: 300px;
      margin: 20px 0;
      border: 2px solid #333;
      background-color: #f0f0f0;
    }

    .css-sample-box {
      padding:10px; 30px;
      border:1px solid #444444;
      background-color: #d3e0ea;
      text-align: center;
      font-size: 16px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #333;
    }

place-items: center;

アイテムがコンテナの中央に配置されます。

HTMLコード

<div class="css-sample-container css-sample-place-items-center">
      <div class="css-sample-box">1</div>
      <div class="css-sample-box">2</div>
      <div class="css-sample-box">3</div>
      <div class="css-sample-box">4</div>
    </div>

CSSコード

.css-sample-place-items-center {
      place-items: center;
    }

表示結果

1
2
3
4

place-items: start;

アイテムが開始位置（上部左側）に配置されます。

HTMLコード

<div class="css-sample-container css-sample-place-items-start">
      <div class="css-sample-box">1</div>
      <div class="css-sample-box">2</div>
      <div class="css-sample-box">3</div>
      <div class="css-sample-box">4</div>
    </div>

CSSコード

.css-sample-place-items-start {
      place-items: start;
    }

表示結果

1
2
3
4

place-items: end;

アイテムが終了位置（下部右側）に配置されます。

HTMLコード

<div class="css-sample-container css-sample-place-items-end">
      <div class="css-sample-box">1</div>
      <div class="css-sample-box">2</div>
      <div class="css-sample-box">3</div>
      <div class="css-sample-box">4</div>
    </div>

CSSコード

.css-sample-place-items-end {
      place-items: end;
    }

表示結果

1
2
3
4

まとめ

  • place-items: center; – アイテムを中央に配置します。
  • place-items: start; – アイテムを開始位置に配置します。
  • place-items: end; – アイテムを終了位置に配置します。
スポンサーリンク