STEP2. グリッドを考える

2-1. グリッドの考え方

CSSグリッドはTABLEレイアウトやFlexboxレイアウトなどの様々なグリッドシステムに比べて、これまで以上にシンプルな考え方でWebサイトを構築することができます。

より簡単に言えば、CSSグリッドシステムを構築するのに必要なのは、以下の2つだけです。

1. グリッドのデザイン
2. 異なるViewportでグリッドがどのように振る舞うか

グリッドのデザインについてはSTEP1で見てきたので、STEP2で*「異なるViewportによる挙動」*を設定していきます。
　　

2-2. モバイル版レイアウトを作成

レスポンシブデザインでWebサイトを作る際に、最も簡単な方法はモバイル版のレイアウトを先に作っていくことです。理由はいくつか挙げられますが、1番はグリッドコンテナの中に入れていくグリッドアイテムが、CSSグリッド適用前だと1カラムに並ぶので、イメージしやすいからです。

スライド1.png
ただし、デスクトップ版では表示するけれど、モバイル版では表示しないものについては、一旦フッターエリアの下に入れておきましょう。
　　

2-3. グリッドのベースを作成

続いて、デスクトップ版のカラムレイアウトを作成してみましょう。

まずは、親要素であるグリッドコンテナーを配置して、縦横に線を分割してみましょう。

最初に、display: gridを指定することで親要素をグリッドコンテナー化します。次に、grid-template-columnsプロパティを指定して縦の線を引っ張ります。均等に分割するために、*「fr」(fractions)*という単位を利用できます。

ここでは、チュートリアルとして3x3のカラムを作成していきます。

grid-template-columns: 1fr 2fr 1fr;

縦と同様に、横の線をgrid-template-rowsプロパティで指定していきます。

grid-template-rows: 100px auto 100px;

これで、3x3のカラムが完成しました。

スライド2.png

ちなみに、任意ですが、grid-template-areasプロパティを使ってエリアに名前を付けることができます。

例えば、下記のような場合では、9分割したグリッドコンテナーのエリアに名前を付けています。

.site {
　　display: grid;
　　grid-template-colmn: 1fr 2fr 1fr;
　　grid-template-rows: 100px auto 100px;
　　grid-template-areas:
　　　"header header menu"
　　　"navigation content ad"
　　　"footer footer footer"
}

このように指定すると、下図のように名前が付けられたことになります。同じ名前を付けているエリアがあるという点は、非常に重要です。
　　

2-4. グリッドにコンテンツを流し込む

続いて、グリッドにコンテンツを流し込んでいきます。

グリッドの名前がすでにgrid-template-areasプロパティで付けられていれば、あとは簡単です。

.header {
　　grid-area: header;
}

.content {
　　grid-area: content;
}

// 以下同様

スライド3.png

このようにすれば、先ほど付けたタイトルにグリッドを流し込むことができます。
　　

2-5. メディアクエリで操作

最後に、レスポンシブの挙動を加えていきます。

ここでは、仮にブレイクポイントを800pxにして考えていきます。考え方について重要な点は、次の2点です。

1. 800px以上ではdisplay: gridを、それ以外ではdisplay: boxを適用
2. 800px以上で表示するコンテンツはgrid-areaを正確に指定、それ以外ではgrid-area: autoにして、表示しないコンテンツはdisplay:noneを指定

こうすることで、800px以上での挙動とそうではない場合をわけることができます。