CSSのjustify-itemsでグリッド内のアイテムの水平方向の配置を制御する方法をわかりやすく解説

2024.09.14
スポンサーリンク

CSSのjustify-itemsプロパティは、グリッドレイアウト内でアイテムを水平方向にどのように配置するかを制御します。このプロパティにより、各グリッドアイテムの水平位置が調整され、グリッド内での配置方法を簡単に指定できます。以下に、主要な値とその効果をリストで示し、詳細な表示例と共に解説します。

スポンサーリンク

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

  • justify-items: start; – アイテムはセルの左側に揃います。
  • justify-items: end; – アイテムはセルの右側に揃います。
  • justify-items: center; – アイテムはセルの中央に配置されます。
  • justify-items: stretch; – アイテムはセル全体に広がります。

注意点や関連情報

justify-itemsプロパティは、主にdisplay: gridを使用している場合に有効です。フレックスボックスでは代わりにjustify-contentプロパティを使用します。また、justify-itemsは水平方向のみを制御し、垂直方向の配置はalign-itemsプロパティで制御します。stretchは、アイテムがセル全体に拡張されるため、デフォルトではこの値が適用されます。

justify-itemsプロパティが効かない時の原因と対策

displayプロパティがグリッドレイアウトに設定されていない

justify-itemsプロパティは、グリッドレイアウト（display: grid;）でアイテムの水平方向の配置を制御します。要素がグリッドレイアウトとして設定されていない場合、このプロパティは効果を発揮しません。
対策: 親要素にdisplay: grid;を指定し、グリッドレイアウトを有効にしてください。例えば、display: grid; justify-items: center;のように設定して、子要素が中央に揃うようにします。

justify-selfがアイテムに適用されている

各グリッドアイテムに個別にjustify-selfプロパティが設定されていると、親要素に設定されたjustify-itemsプロパティが上書きされることがあります。
対策: グリッドアイテムにjustify-selfが適用されていないか確認し、必要に応じて削除するか、justify-itemsと競合しないように調整します。例えば、すべてのアイテムに同じ配置を適用したい場合は、justify-selfを削除します。

grid-template-columnsが適切に設定されていない

justify-itemsプロパティは、グリッドレイアウトで水平方向の配置を制御しますが、grid-template-columnsで適切な列幅が設定されていない場合、効果が反映されないことがあります。
対策: grid-template-columnsプロパティで列幅を適切に設定し、グリッドアイテムが正しく配置されるように調整してください。例えば、grid-template-columns: repeat(3, 1fr);のように列幅を指定し、余白を確保します。

グリッドアイテムの配置が自動で決定されている

グリッドアイテムが自動的に配置される場合、justify-itemsプロパティの効果が期待通りに機能しないことがあります。特に、grid-auto-flowプロパティによってアイテムが自動配置される場合、このプロパティが影響することがあります。
対策: grid-auto-flowの設定を確認し、アイテムが自動配置されていないか確認します。自動配置を無効にするか、手動で配置を指定することを検討してください。

align-itemsプロパティが誤って使用されている

justify-itemsは水平方向の配置を制御しますが、垂直方向の配置はalign-itemsで制御されます。誤ってalign-itemsを使用している場合、水平配置が正しく設定されていない可能性があります。
対策: 水平方向の配置にはjustify-itemsを使用し、垂直方向の配置にはalign-itemsを使用して適切に分けて設定しましょう。例えば、justify-items: center;とalign-items: start;のように組み合わせて使用します。

共通するCSSコード

.css-sample-container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      width: 100%;
      height: 200px;
      background-color: #f9f9f9;
      padding: 20px;
      border: 1px solid #ccc;
      margin: 20px auto;
    }

    .css-sample-item {
      background-color: #cce7ff;
      border: 1px solid #99ccff;
      padding: 20px;
      text-align: center;
      margin: 10px;
      width: 80px;
    }

justify-items: start;

アイテムはグリッドセルの左側に揃えられます。セル内でアイテムを左寄せに配置したい場合に使用します。

HTMLコード

<div class="css-sample-container css-sample-justify-start">
      <div class="css-sample-item">1</div>
      <div class="css-sample-item">2</div>
      <div class="css-sample-item">3</div>
    </div>

CSSコード

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

表示結果

1
2
3

justify-items: end;

アイテムはグリッドセルの右側に揃えられます。

HTMLコード

<div class="css-sample-container css-sample-justify-end">
      <div class="css-sample-item">1</div>
      <div class="css-sample-item">2</div>
      <div class="css-sample-item">3</div>
    </div>

CSSコード

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

表示結果

1
2
3

justify-items: center;

アイテムはセルの中央に配置されます。アイテムを真ん中に配置したい場合に使用します。

HTMLコード

<div class="css-sample-container css-sample-justify-center">
      <div class="css-sample-item">1</div>
      <div class="css-sample-item">2</div>
      <div class="css-sample-item">3</div>
    </div>

CSSコード

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

表示結果

1
2
3

justify-items: stretch;

アイテムはセル全体に広がります。

HTMLコード

<div class="css-sample-container css-sample-justify-stretch">
      <div class="css-sample-item">1</div>
      <div class="css-sample-item">2</div>
      <div class="css-sample-item">3</div>
    </div>

CSSコード

.css-sample-justify-stretch {
      justify-items: stretch;
    }

表示結果

1
2
3

まとめ

  • justify-itemsプロパティは、グリッドコンテナ内のアイテムを水平方向に配置するためのプロパティです。
  • デフォルト値はstretchで、アイテムはセル全体に広がります。
  • アイテムを左寄せ、右寄せ、中央揃えにするにはそれぞれstart、end、centerを使用します。
  • グリッドレイアウトにおける水平配置の調整に役立つプロパティで、align-itemsで垂直方向も合わせて調整することが可能です。
スポンサーリンク