概要

CSSのjustify-itemsプロパティは、グリッドコンテナ内のアイテムを水平に配置する際に使用されるプロパティです。このプロパティを使うことで、グリッド内の各アイテムの配置位置を簡単にコントロールできます。特に複雑なレイアウトを作成する際に役立ち、デザインの自由度を高めることができます。

justify-itemsの基本的な使い方

justify-itemsプロパティは、グリッドレイアウトにおいて各アイテムの水平位置を設定します。主にgridコンテナに適用され、子要素がどのように配置されるかを決定します。

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center; /* 各アイテムを中央に配置 */
}

この例では、.containerにdisplay: grid;を指定し、justify-items: center;によってグリッド内の各アイテムが中央に配置されます。

justify-itemsの値

justify-itemsには以下の値を指定できます。それぞれの値がどのようにアイテムの配置に影響するかを説明します。

start

アイテムをコンテナの開始位置（左端）に配置します。

.container {
    justify-items: start;
}

end

アイテムをコンテナの終了位置（右端）に配置します。

.container {
    justify-items: end;
}

center

アイテムをコンテナの中央に配置します。

.container {
    justify-items: center;
}

stretch

アイテムを可能な限りコンテナ内に広げて配置します。デフォルトの値です。

.container {
    justify-items: stretch;
}

使用例

基本的な使用例 - 中央に配置

justify-items: center;を使用して、グリッド内の各アイテムを中央に配置します。

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>
<style>
.container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    justify-items: center;
}
.item {
    background-color: lightblue;
    padding: 20px;
    border: 1px solid #ccc;
}
</style>

左寄せと右寄せ

justify-items: start;とjustify-items: end;で、アイテムを左端または右端に配置します。

.container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    justify-items: start; /* 左寄せ */
}
/* 右寄せに変更する場合 */
.container-right {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    justify-items: end; /* 右寄せ */
}

stretchでアイテムを引き伸ばす

justify-items: stretch;を使うと、アイテムがグリッドの幅いっぱいに引き伸ばされます。

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: stretch;
}

注意点

• justify-itemsプロパティはフレックスボックスでは使用できません。主にグリッドレイアウトで使われます。
• フレックスボックスで似たような効果を得るには、justify-contentやalign-itemsなどのプロパティを使用します。
• justify-itemsの値は、グリッド内のすべてのアイテムに一括適用されますが、特定のアイテムにのみ異なる配置をしたい場合はjustify-selfを使用します。

まとめ

justify-itemsプロパティは、CSSグリッドレイアウトにおいてアイテムの配置を簡単に制御できる便利なプロパティです。これを使用することで、グリッドコンテナ内のアイテムがどのように配置されるかを細かく調整でき、レイアウトの自由度が向上します。グリッドレイアウトを使用したデザインの際には、ぜひこのプロパティを活用して、視覚的に整った配置を実現しましょう。