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

2024.09.14
スポンサーリンク

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

スポンサーリンク

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

  • place-content: center; – コンテンツを中央に配置します。
  • place-content: space-between; – コンテンツ間に均等な間隔を設けます。
  • place-content: stretch; – コンテンツがコンテナ全体に引き伸ばされます。

注意点や関連情報

place-contentは、縦と横の配置を同時に設定するショートハンドプロパティです。個別に設定する場合は、align-contentやjustify-contentを使用できます。また、gridやflexレイアウトの中で使われます。

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

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

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

対策: place-contentを使用したい親要素にdisplay: gridまたはdisplay: flexを指定します。例えば、display: grid;を親要素に適用してからplace-contentを使うようにします。

共通する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-content: center;

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

HTMLコード

<div class="css-sample-container css-sample-place-content-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-content-center {
      place-content: center;
    }

表示結果

1
2
3
4

place-content: space-between;

コンテンツが等間隔で配置され、端に寄せられます。

HTMLコード

<div class="css-sample-container css-sample-place-content-space-between">
      <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-content-space-between {
      place-content: space-between;
    }

表示結果

1
2
3
4

place-content: stretch;

コンテンツが引き伸ばされ、コンテナ全体に広がります。

HTMLコード

<div class="css-sample-container css-sample-place-content-stretch">
      <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-content-stretch {
      place-content: stretch;
    }

表示結果

1
2
3
4

まとめ

  • place-content: center; – コンテンツを中央に配置します。
  • place-content: space-between; – コンテンツ間に均等な間隔を設け、端に寄せられます。
  • place-content: stretch; – コンテンツがコンテナ全体に引き伸ばされます。
スポンサーリンク