CSS Grid ~基礎編~

2019.11.08

はじめに

この記事では、CSS Gridの解説と基本的な使い方について説明していきたいと思います。

CSS Gridとは?

格子状のエリアを定義し、そこにhtml要素を自由に配置できるレイアウト方法です。

Gridレイアウトは、 「コンテナ」と「アイテム」という二つの要素によって構成されています。アイテムは大きさや順番を自由に指定することができます。水平線と垂直線の配置する間隔を指定することで格子状のコンテナを生成し、生成したコンテナのセルにアイテムを自由に配置することが可能です。

今までよく使われていたfloatレイアウトやflexレイアウトでは、CSSで要素が横並びに回り込むような仕様になっています。このようなレイアウトを、一次元レイアウトと言います。しかし、tableレイアウトや今回解説するGridレイアウトには回り込みがありません。このようなレイアウトを、二次元レイアウトと言います。

一次元レイアウトと二次元レイアウトの違いが一番分かりやすくなるのは、flexレイアウトとGridレイアウトを比較することです。どちらもコンテナの中にアイテムを配置していくレイアウト方法ですが、flexレイアウトは回り込みの設定を自由に変更できる仕様になっており、Gridレイアウトはアイテムが水平線と垂直線のグリッドに沿っていれば、縦横関係なく自由な場所に自由な大きさで配置することができます。

 

従来のレイアウトとの比較

Gridレイアウトについて解説しましたが、「今までのレイアウトとどういう部分が違うのか」を従来のレイアウトについて説明しGridレイアウトと比較をしていきたいと思います。

1)テーブルレイアウトとの比較

テーブルレイアウトとはCSSが主流でなかった頃のレイアウト方法です。<table>タグで大きな括りを作り、その中に<tr>タグでboxを作り<tb>タグの中に画像や文字を入れ込みレイアウトする方法になります。

テーブルレイアウトは二次元レイアウトなので、Gridレイアウトと似ています。しかし、htmlを上から順番に書かなくてはいけない、htmlの記述が長く複雑になってしまう、変更がかかると全てを書き直さないといけない、といった面倒な部分があります。その点Gridレイアウトは変更がかかっても容易に変更することが可能です。

 

テーブルレイアウト

Gridレイアウト

長所

・どんなブラウザでも表示が同じ

・初心者でも扱いやすい

・均一なレイアウトにできる

・レイアウトが複雑でもhtmlがシンプル

・htmlの順番が自由

短所

・レイアウトが複雑になるほどhtmlも複雑化する

・html記述の順番が制限される

・新しい単位などを覚えなければならない

・古いブラウザでは動作しない

2)floatレイアウトとの比較

 floatレイアウトは指定した要素を左寄せ(float:left)もしくは右寄せ(float:right)にすることができ、更に周囲の要素を回り込ませることができます。floatを使えば段組レイアウト・挿絵の周りにテキストを流し込む・コンテンツを横並びに配置することができます。 更に、clearプロパティを使えば回り込んでほしくなかった要素の回り込みを解除できるので、画像の下にテキストを配置したりすることができます。

  floatレイアウトは画像+テキストだったり左右に要素を振り分けるレイアウトには便利ですが、flexboxレイアウトが出て以降は、使う場面が減ってきました。Gridレイアウトよりも表示崩れが起きやすく、floatレイアウトを親要素に使用すると高さを取得してくれなくなってしまうため、レイアウトの調整も場合によっては面倒で難しくなります。

 

floatレイアウト

Gridレイアウト

長所

・古いブラウザでも動作する

・要素を回り込ませる

・垂直方向のレイアウトが簡単

・gridをつけることでのレイアウト崩れがない

短所

・clearプロパティを使わないとレイアウトが崩れる

・要素の高さが取得されない

・レイアウト調整が難しい

・新しい単位などを覚えなければならない

・古いブラウザでは動作しない

3)flexboxレイアウトとの比較

CSS3から追加されたレイアウト方法です。flexboxはコンテナとアイテムという二つの要素によって構成されています。コンテナでdisplay:flexを指定すれば、アイテムを自動で均等に配置したり、高さを統一したり、指定の要素のみを左右上下どこにでも寄せることができます。

floatレイアウトと比べて回り込みを制御し、要素を均等に簡単に配置することができる仕様になったので、レイアウトが楽になりました。しかし、高さの違う要素をレイアウトしていきたいとなるとGridレイアウトのほうが高さの調節がしやすいのでレイアウトのデザインに合わせて適材適所で使うのがベストです。

 

flexboxレイアウト

Gridレイアウト

長所

・どの方向にでも揃えて配置できる

・横並びに強い

・垂直方向のレイアウトが簡単

・二次元レイアウトなのでレイアウトが崩れることがない

・高さの異なる要素を使ったレイアウトがしやすい

短所

・floatレイアウトと同じ回り込みがあるので崩れる

・ブラウザ対応が大変

CSS Gridの概念

次に、Gridレイアウトで使われる言葉について説明したいと思います。

1)グリッドコンテナー

要素にdisplay:gridもしくはdisplay:inline-gridを指定すると、その要素がグリッドコンテナーとしての役割を持ちます。親要素になります。画像全体がグリッドコンテナーの部分になります。

2)グリッドアイテム

グリッドコンテナーに配置される要素です。子要素になります。flexとは違いアイテムが並んでいるのではなく、アイテムでコンテナーを区切るように配置されます。

3)グリッドライン

CSS Gridではコンテナーに縦横の線を引くことができます。段を作る「列」(column)と、水平方向に分割する「行」(row)と二種類あります。画像の赤い点線が「列」(column)のラインで青い点線が「行」(row)になります。

4)グリッドセル

列と行の二本の線で区切られたところのことを指します。画像を例にすると、1番・2番の列の線と行の線で区切られた青いボックスの部分を 指します。画像では5番までの番号になっていますが、5番までという制限はありません。レイアウトに合わせて変えることができます。

5)グリッドトラック

垂直もしくは水平に連続したグリッドセルのことを言います。画像を例にすると、1番・2番の列の線もしくは行の線内にある連続したグリッドセルのことをまとめてグリッドトラックと呼びます。 

6)グリッドエリア

画像のようにアイテムを行と列の複数のセルにまたがって配置することで作るエリアのことをグリッドエリアと言います。グリッドエリアは四角形でなければならず、L字型のようなエリアは作ることができません。

 

7)グリッドギャップ

画像の黄色い枠線の中のように、グリッドトラック同士の間にできる空白スペースのことを言います。

 

基本的な使い方

以上の基本的な概念を踏まえて、簡単なレイアウトを実装してみます。

今回は以下の画像のようなレイアウトを組んでみようと思います。このようなレイアウトはよくfloatを使うと思われますが、CSS Gridを使うことで単純な考え方で実装することができます。

htmlは次のように記述しました。

 

次にCSSです。まず全体を覆っているbodyタグにdisplay: gridを指定します。

 

次にそれぞれの領域の大きさを指定します。grid-template-rowsで高さを指定、grid-template-columnsで横幅を指定することができます。今回は以下のようなサイズで作ってみたいと思います。黄色と赤色のボックスは中に画像やテキストを入れるので高さをautoにしました。
 
 
CSSはこのような記述になります。

 

幅の指定はグリットアイテムの区切り分必要になります。縦は3行分、横は2列分記述しなければいけません。
CSS Gridで使用できるfrという単位は、横幅の指定がされていない部分に対して、相対的割合を自動で適用する単位になります。今回は横幅をすべてfrで指定するので、全体の大きさに対して1:1という比率に自動で指定してくれます。縦幅の指定の際にも使用できます。
 
次にグリッドアイテムをどこに配置するかを指定していきます。画像のようにグリッドラインに番号が振られています。なので「行」(row)の範囲はheader が1~2番、image・textが2~3番、footerが3~4番となっています。「列」(column)の範囲も同様の考え方です。CSSでの記述は以下のようになります。

 

ここまで記述したら、ブラウザ上で確認することができます。以下の画像のように表示されると思います。
 
さらにグリッドアイテムの中に画像やテキストなどを配置してみます。

 

何も設定しなければ、図のようにテキストや画像がグリッドセルの左上詰めに配置されます。グリッドセルの中に要素が配置されているので、大まかな配置はできています。あとは見やすいようにcssで調整していきます。
marginやpaddingなどを使って細かい位置調整を行ったり、header・footerにある文字の背景や文字色を変えていきます。画像のサイズは427×225です。
CSSは以下のようになります。
ブラウザではこのように表示されると思います。
このように表示されたら今回は完成です。
CSS Gridを使うことで、初めからアイテムの大体の位置が決まっていたので、空白の調整のみで済みました。
 

まとめ

今回は過去のCSSでのレイアウト方法も振り返ったうえで、CSS Gridを使って簡単な実装を行いました。しかし、基礎編ということであまり効率のいいCSSの書き方はしていません。記事内で紹介したもの以外にも様々なプロパティがあり、様々な実装方法があるので次回「応用編」としてご紹介できればと思います。