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>

ブラウザ表示