CSSグリッド完全入門！grid-column・grid-rowで要素の位置と範囲を指定する方法

grid-column・grid-row で要素の位置と範囲を指定する方法

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

生徒

「CSSのグリッドレイアウトで、箱の位置を自由に動かせるって聞いたんですが難しそうです」

先生

「grid-columnとgrid-rowを使えば、マス目のどこに置くか簡単に指定できます」

生徒

「数字を指定するって聞いて、それだけで混乱してしまって…」

先生

「方眼紙をイメージすると、とても分かりやすくなりますよ」

1. グリッドレイアウトを超かんたんに説明

CSSのグリッドレイアウトは、画面をマス目状に区切って配置する仕組みです。小学校で使った方眼紙を思い出してください。横と縦に線が引かれていて、マスの中に文字や図を書きます。それと同じ考え方で、画面を整理します。

グリッドレイアウトを使うと、要素の位置がズレにくくなり、見た目が整ったページを作りやすくなります。特に複数の箱を並べるときに力を発揮します。

2. grid-columnとgrid-rowとは何をするものか

grid-columnとgrid-rowは、要素をどのマスに置くか指定するためのCSSです。 columnは横方向、rowは縦方向を表します。

数字は「線の番号」を意味します。マスの番号ではなく、マスを区切る線の番号だと考えると混乱しにくくなります。左から右、上から下へと順番に数えます。

3. grid-columnで横の位置と幅を指定する

grid-columnは、横方向にどこからどこまで使うかを指定します。開始位置と終了位置をセットで書くことで、横幅を自由に決められます。


<style>
.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.box {
    grid-column: 1 / 3;
    background: lightblue;
}
</style>

<div class="container">
    <div class="box">横に2マス使う箱</div>
</div>

ブラウザ表示

この例では、左から1番目の線から3番目の線まで使っています。そのため、箱は横に2マス分の幅になります。

4. grid-rowで縦の位置と高さを指定する

grid-rowは縦方向の指定です。上から何番目から何番目まで使うかを決めます。行をまたいで大きな要素を作ることもできます。


<style>
.container {
    display: grid;
    grid-template-rows: 100px 100px 100px;
}
.box {
    grid-row: 1 / 3;
    background: lightgreen;
}
</style>

<div class="container">
    <div class="box">縦に2マス使う箱</div>
</div>

ブラウザ表示

縦に長い要素を作りたいときに、とても便利です。メニューやサイドバーにもよく使われます。

5. grid-columnとgrid-rowを同時に使う

横と縦を同時に指定すれば、好きな場所に配置できます。まるでパズルのピースを置く感覚です。


<style>
.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 80px);
}
.box {
    grid-column: 2 / 4;
    grid-row: 2 / 4;
    background: orange;
}
</style>

<div class="container">
    <div class="box">中央に配置された箱</div>
</div>

ブラウザ表示

このように指定すると、箱は中央付近に大きく表示されます。レイアウトの自由度が一気に高まります。

6. spanを使って範囲を指定する考え方

spanは「どれだけ広げるか」を表します。開始位置から何マス分使うかを指定できます。数字が少なく、覚えやすいのが特徴です。


<style>
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.box {
    grid-column: 1 / span 2;
    background: pink;
}
</style>

<div class="container">
    <div class="box">spanで横2マス</div>
</div>

ブラウザ表示

初心者のうちは、spanを使うと感覚的に理解しやすくなります。