CSSグリッド完全入門！place-items・place-contentの使い方と違いを初心者向けにやさしく解説

place-items・place-content の使い方と違い

先生と生徒の会話形式で理解しよう

生徒

「CSSグリッドでplace-itemsとかplace-contentって出てきましたが、何が違うんですか？」

先生

「どちらも位置をそろえる指定ですが、動かす対象が違います」

生徒

「位置をそろえるって言われても、どこをそろえているのか分からなくて…」

先生

「机の上に物を並べるイメージで説明しますね」

1. CSSグリッドレイアウトで位置をそろえる意味

CSSグリッドレイアウトは、画面をマス目のように区切って要素を配置する仕組みです。このとき、要素がマスのどこに置かれるかを調整する必要があります。

初心者の方は、要素が左上に寄ったり、思った位置に来なかった経験が多いと思います。 place-itemsやplace-contentは、こうした位置調整を簡単にするための指定です。

2. place-itemsとは何をそろえる指定か

place-itemsは、グリッドの中に入っている「中身」をそろえる指定です。例えるなら、お弁当箱の中でおかずを中央に寄せるようなイメージです。

箱そのものではなく、箱の中の物の位置をそろえる点がポイントです。縦方向と横方向をまとめて指定できるので、初心者でも扱いやすいです。


<style>
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 200px;
    place-items: center;
}
.box {
    background: lightblue;
    padding: 20px;
}
</style>

<div class="grid">
    <div class="box">A</div>
    <div class="box">B</div>
</div>

ブラウザ表示

3. place-contentとは何をそろえる指定か

place-contentは、グリッド全体の「かたまり」を動かす指定です。テーブルの上に箱をまとめて中央に置くイメージに近いです。

中身ではなく、マス目全体の配置を調整するため、グリッドのサイズに余白があるときに効果が分かりやすくなります。


<style>
.wrapper {
    display: grid;
    grid-template-columns: 100px 100px;
    height: 300px;
    place-content: center;
}
.item {
    background: lightgreen;
    padding: 10px;
}
</style>

<div class="wrapper">
    <div class="item">1</div>
    <div class="item">2</div>
</div>

ブラウザ表示

4. place-itemsとplace-contentの大きな違い

place-itemsは「中に入っている要素」をそろえ、 place-contentは「枠全体」をそろえます。この違いを理解することが重要です。

初心者の方は、動かしたいのが中身なのか、それとも全体なのかを意識すると迷いにくくなります。

5. レスポンシブデザインでの使い分け

レスポンシブデザインでは、画面サイズによって余白が変わります。 place-contentは、画面が広いときに中央寄せをしたい場合に便利です。

一方、place-itemsはスマートフォンでもパソコンでも、要素の中身を安定して中央に置きたいときに役立ちます。


<style>
.responsive {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    height: 250px;
    place-items: center;
    place-content: center;
}
.card {
    background: pink;
    padding: 20px;
}
</style>

<div class="responsive">
    <div class="card">カード1</div>
    <div class="card">カード2</div>
</div>

ブラウザ表示