ウェブログラム ~学習するな実践せよ~

Grid Layoutの簡単な「書き方」を学ぶ

前回はグリッドレイアウトで登場する「用語」について解説しました。用語が曖昧な方は先に前回の記事を見てくださいね。

簡単なグリッドレイアウトの書き方

簡単に書き方を学んで行きましょう。想定するグリッドとしては以下になります。

2行4列のグリッドを想定します。このグリッドセルは合計で8つですね。(※グリッドラインでは3×5となってますが、これはラインだからです。グリッドトラックとしては2×4です)
また、それぞれのグリッドセルは「200px」×「200px」とします。

では、このグリッドをCSSで作成していきましょう。

グリッドコンテナを作成する

グリッドコンテナ用のdivを用意します。containerというclass名をつけておきました。

index.html
<div class="container">
</div>

続いて、このdivをグリッドコンテナ化します。

style.css
.container {
display: grid;
grid-template-rows: 200px 200px;
grid-template-columns: 200px 200px 200px 200px;
}

グリッドコンテナにするには、display: grid;を設定すればOKです。
その次の「grid-template-rows」と「grid-template-columns」についてはそれぞれ、
「行」と「列」のグリッドラインのサイズと個数を決めています。今回の場合は、
200pxで2行、200pxで5列にしてます。

グリッドアイテムの配置

グリッドコンテナが出来たので、ここにグリッドアイテムを配置していきましょう。今回グリッドアイテムの個数は3つとします。
この3つを横に並べたり、縦に並べたり、縦横に違う配置で並べたりしてみましょう。

まずは、グリッドアイテムのdivを作成します。

index.html
<div class="container">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
</div>

こうですね、divを3つ追加して、それぞれitem1〜item3までclass名をつけました。


最初に以下のような横並びをコーディングしていきましょう。

HTMLは一緒ですが一応cssと一緒に載せておきます。(見やすさのため各itemに色をつけてます)

index.html
<div class="container">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
</div>
style.css
.container {
display: grid;
grid-template-rows: 200px 200px;
grid-template-columns: 200px 200px 200px 200px;
}

.item1 {
background: #6dffa5;
grid-row-start: 1;
grid-row-end: 2;
}

.item2 {
background: #73d1ff;
grid-row-start: 1;
grid-row-end: 2;
}
.item3 {
background: #f8ff7f;
grid-row-start: 1;
grid-row-end: 2;
}

新しいプロパティ「grid-row-startとgrid-row-end」が出てきました。
これはグリッドアイテムを、どこからどこまでのグリッドラインに表示するかを設定します。rowなので行ですね(もちろんrowがあればcolumnの設定もあります、これは後ほど)。
つまり、1行目のグリッドライン(赤線)から始まり、終わりが2行目のグリッドラインまでということです(endを3にすれば3のグリッドラインまで伸びます)。

この設定をitem1〜item3にしているので、それぞれ「同じ行」・「同じサイズ」で表示されます。

実は省略して書くこともでき、

.item1 {
background: #6dffa5;
grid-row: 1/2;
}

grid-row: 1/2;というふうにstart、endを一気に指定することができます。
また更に省略出来き

grid-row: 1/2;
ではなく
grid-row: 1;

とendの2を省略できます。
なぜ省略できるのかというと隣のグリッドラインだからです(1と2のような)。これがstartが1でendが3であれば省略は不可で、grid-row: 1/3;このように書かなければいけません。

startが2でendが3であれば、grid-row: 2;でOKです。

ここからはなるべく省略して書いていきます。

縦にも並べてみる

次は以下の配置をコーディングしていきましょう。

ポイントはitem3が縦に並んでいるところです。

index.html
<div class="container">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
</div>
style.css
.container {
display: grid;
grid-template-rows: 200px 200px;
grid-template-columns: 200px 200px 200px 200px;
}

.item1 {
background: #6dffa5;
grid-row: 1;
}

.item2 {
background: #73d1ff;
grid-row: 1;
}
.item3 {
background: #f8ff7f;
grid-row: 2; /* ここだけ2を指定 */
}

コーディング自体はほぼ変わらず、item3のgrid-rowを2にするだけです。つまり「item3は2行目に配置してくれ」といった感じですね。

列も指定してみる

次はrow(行)だけでなくcolumn(列)も指定してみましょう。

index.html
<div class="container">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
</div>
style.css
.container {
display: grid;
grid-template-rows: 200px 200px;
grid-template-columns: 200px 200px 200px 200px;
}

.item1 {
background: #6dffa5;
grid-row: 1/3;
}

.item2 {
background: #73d1ff;
grid-row: 1;
grid-column: 2/5;
}
.item3 {
background: #f8ff7f;
grid-row: 2;
grid-column: 2/5;
}

こうですね。図のグリッドラインの番号と見比べならがコードを読むとわかりやすいと思います。
また、grid-column: 2/5;この書き方は違う方法でも書くことができます。

grid-column: 2/span 3;

でかけます。
これはstartの列が2から始まり、3つ分列を伸ばすという意味になります。2から3つ分は5の位置になるので、同じ配置となります。

全てのアイテムにrowとcolumnを指定する

ここまで来れば、分かるようになってきたかと思いますが、一応すべてのアイテムのrowとcolumn指定をしてみましょう。

index.html
<div class="container">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
</div>
style.css
.container {
display: grid;
grid-template-rows: 200px 200px;
grid-template-columns: 200px 200px 200px 200px;
}

.item1 {
background: #6dffa5;
grid-row: 1;
grid-column: 1/3;
}

.item2 {
background: #73d1ff;
grid-row: 1;
grid-column: 3/5;
}
.item3 {
background: #f8ff7f;
grid-row: 2;
grid-column: 1/5;
}

コードはこうですね。これで、grid-rowとgrid-columnの指定は終わりです。
ある程度ここについてはマスターできたと思います。

グリッドラインを多くしたり、グリッドアイテムを増やしたりしてもっと複雑なレイアウトを表現すれば、力がついていくと思います。