CSS Gridの基本

はじめに

Gridレイアウトの基本について、初心者向けの備忘録です。

作成手順

1.htmlを記述

グリッド全体を囲むcontainerの子要素にレイアウトしたいアイテムを記述します。
タグやクラスは任意です。

<div class="container">
    <div class="header">header</div>
    <div class="sidebar">sidebar</div>
    <div class="main">main</div>
    <div class="nav">nav</div>
  　<div class="form">form</div>
    <div class="footer">footer</div>
</div>

2.CSS Gridを適用

containerに「display : grid;」を指定します。
アイテムはそれぞれグリッドラインという縦横の線で分割されます。

.container{
    display: grid;
}

3.グリッドトラックのサイズ指定

グリッドトラックとは、隣接する2本のグリッドラインの間のスペースのことを指します。

・ grid-template-rowsでグリッドトラックの高さ
・ grid-template-columnsでグリッドトラックの幅
を指定していきます。

※プロパティ名の末尾が複数形なので注意。

.container{
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-columns: 100px 1fr 1fr;
}

frとは「fraction(分割)」の略で、枠に合わせたグリッドの大きさを自動的に調整してくれます。
上のコードでは、縦は均等に4分割、横は100pxと残りの幅が均等に2分割されます。
単位は他にvhやautoなども使用できます。

4.アイテムの位置を指定

作成したラインに対して、何番目から何番目のラインにかけて要素を配置するかを指定します。
ラインは左上を起点として、1から順番に番号が付与されます。
例では縦線に1〜5の番号、横線に1〜4の番号が割り振られます。

・ grid-rowプロパティで行の配置
・ grid-columnプロパティで列の配置
を指定します。

.footer{
    grid-row: 3/4;
    grid-column: 1/4;
}

上記では、行は3〜4番目のラインにかけて、
列は1〜4番目のラインにかけて要素が配置されます。

他の要素も同様にrowとcolumnの配置を指定します。

.header{
    grid-row: 1/2;
    grid-column: 1/4;
}
.sidebar{
    grid-row: 2/4;
    grid-column: 1/2;
}
.main{
    grid-row: 2/3;
    grid-column: 2/4;
}
.nav{
    grid-row: 3/4;
    grid-column: 2/3;
}
.form{
    grid-row: 3/4;
    grid-column: 3/4;
}
.footer{
    grid-row: 4/5;
    grid-column: 1/4;
}

レイアウト例

分かりやすく色をつけてレイアウトしたものが下記になります。
今回は基本的なプロパティのみ使用しましたが、他にもラインに名前を付けたり、余白を指定したりできる便利なプロパティがあります。

See the Pen BaLxdjW by trym-endo (@poci) on CodePen.

おわりに

Gridは縦横の幅や高さが絡むレイアウトを作成するのに便利ですが、一方でFlexboxよりもCSSが煩雑になってしまうデメリットもあります。
特性の違いによってFlexboxと使い分けたり、組み合わせて使用することで様々なレイアウトに対応できそうです。