[CSS]Grid Layoutとは？

今まで要素の配置はfloatやflexboxを使ってきたが、新しくGrid Layoutという方法を使えばより分かりやすくレイアウトを決めることができます。

今回はこのGrid Layoutの使い方などを紹介していきます。

Grid Layoutとは？

Grid Layoutは新しくCSSに追加された機能ですが、この機能をフォローするブラウザも出揃ったことからよく使われるにようになりました。

従来の手法に比べて、より分かりやすくコードの可読性を保ったまま書くことができるので、現時点においてはCSSのレイアウトで覚えて損はない機能です。

ただし、すべてのレイアウトでGrid Layoutを採用するわけではなくシーンに応じた使い方をおすすめします。

例えば、ページ全体のレイアウトにはGrid Layoutをおすすめしますが、メニューなどの横並び要素にはflexboxの方が適しています。

このように場合によって使い分けするのをおすすめします。

簡単なレイアウトで試してみる

さっそくGrid Layoutの使い方をみていきます。

考え方としては、コンテナで囲んでその中にアイテムを配置する流れになります。

ここでは、よくあるレイアウト例として以下のようなレイアウトで作ってみます。

コンテナで囲む
コンテナ内の大まかなレイアウトを決める
コンテナ内に設置するアイテムの配置を決める

この流れです。さっそくコードで見ていきましょう。

See the Pen VxmRKe by code-school (@code-school) on CodePen.

それでは、コードを一つずつ説明していきます。

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

.container {

display: grid;

grid-template-rows: 100px 400px 50px;

grid-template-columns: 900px 1fr;

}

containerクラスでは全体の大枠を決めています。

先ほども触れましたが、グリッドレイアウトはコンテナという大枠の中にアイテムが配置されます。

ここでは、containerクラスと指定して、display:grid;と記述しています。

これがグリッドレイアウトの基本の記述になります。

そして、grid-template-rows:で縦のレイアウトの大まかな枠組みを設定しています。

ここでは、100px 400px 50pxとしています。

これは、上から100px→400px→50pxということです。

つまり、ヘッダーの高さは100px。

サイドバーを含むメインコンテンツの高さは400px。

フッターの高さは50pxというように指定しています。

grid-template-columnsは横のレイアウトの大まかな枠組みになります。

今回、ヘッダーとフッターの横幅は100%なので、特に指定はないですね。

問題はメインとサイドバー部分です。

grid-template-columns: 900px 1fr;

このように記述することで、左からメイン部分を900px 残りをサイドバー部分としています。1fr とは、残り部分と覚えておきましょう。

コンテナ部分の記述をまとめると、

display: gridでグリッドレイアウトを適用
grid-template-rows(columns)で縦横の大枠を決める
rowsは縦、columnsは横！

アイテムの配置を決める

グリッドレイアウトを使う手順のおさらいをします。

コンテナで囲む
コンテナ内の大まかなレイアウトを決める
コンテナ内に設置するアイテムの配置を決める

ここまで1と2は完了したので、最後の3であるアイテムの配置を決める作業を残すのみとなります。

具体的には、アイテム(ここでいうヘッダーやメイン、サイド、フッター)のクラス内にどこに配置するのかという点を記述していきます。

もう一度、全体のコードとプレビューを掲載します。ここからはヘッダーからフッターのクラスまでを一つずつ解説していきます。

See the Pen VxmRKe by code-school (@code-school) on CodePen.

.header {
background-color: #C5DAC6;
grid-row: 1;
grid-column: 1 / 3;
}

.header {

background-color: #C5DAC6;

grid-row: 1;

grid-column: 1 / 3;

}

(background-colorの説明は割愛します )

grid-row: 1では、上から1番目の場所を指定しています。

ヘッダーの横幅は横に100%ですので、grid-column: 1 / 3 と指定しています。

grid-row: 1 は上から1番目というのは分かりやすい思いますが、grid-column: 1 / 3がわかりづらいですね。

グリッドレイアウトが適用された時点で、画面には見えない番号が割り振られることになります。

ちょうどこのレイアウトでは、カラム(横)に線が3つ入っていると考えます。

ヘッダーは1→2→3の領域にまたがっているので、1 / 3 の記述になります。

では、メインはどうでしょうか？メインは1→2の領域にまたがっているので 1 / 2の記述になります。(1と記述してもOKです)

.main {
background-color: #E89F9D;
grid-row: 2;
grid-column: 1 ;
}

.main {

background-color: #E89F9D;

grid-row: 2;

grid-column: 1 ;

}

サイドの場合は、2→3の領域にまたがっているので 2 / 3の記述になります。

.side {
background-color: #8AD6CB;
grid-row: 2;
grid-column: 2 / 3;
}

.side {

background-color: #8AD6CB;

grid-row: 2;

grid-column: 2 / 3;

}

メインとサイドは縦から2番目になるので、grid-row: 2の記述になります。

最後はフッターとなります。これはヘッダーとほぼ同じなので簡単ですね。

.footer {
background-color: #A299F5;
grid-row: 3;
grid-column: 1 / 3;
}

.footer {

background-color: #A299F5;

grid-row: 3;

grid-column: 1 / 3;

}

フッターは縦から3番目なので、grid-row: 3。

ヘッダーと同じく1→3にまたがっているのでgrid-column: 1 / 3の記述となります。

Grid間の余白はどうするか？

Grid間の余白も設定することができます。

grid-column-gap
grid-row-gap

この二つのプロパディで設定することができます。便利ですねぇ。

ちなみに、grid-gapはこの二つのショートハンドとなり、grid-gap: 5px 10px;と記述することで、

grid-column-gap: 5px;
grid-row-gap: 10px;

1 2	grid-column-gap: 5px; grid-row-gap: 10px;

と同義になります。

flexboxとGrid Layoutでだいたいのレイアウトはカバーできる

Grid Layoutを使ってみて感じるのはレイアウトのしやすさというかコードがスッキリする点でしょうか。

しかし、全てのレイアウトをGrid Layoutで賄うというのではなく、flexboxと組み合わせるとレイアウトもさらにしやすくなります。

Grid Layoutが二次元のレイアウトであれば、flexboxは一次元のレイアウトという感じでしょうか。

下記の例では、全体的なレイアウトはGrid Layoutを採用していますが横並びのナビゲーションメニューやメインコンテンツではflexboxを採用してレイアウトしています。

See the Pen aGpyeL by code-school (@code-school) on CodePen.