「CSSグリッド」とは？基礎と使い方を解説

Webデザインを学び始める人が最初に立ちはだかる壁が、段組としてのレイアウトです。

Webデザインの黎明期は、TABLEレイアウト、そしてfloatを使った回り込みレイアウトが主流でした。しかし、TABLEレイアウトは読み込み時間が長くなる傾向になり、floatを使ったデザインはブラウザによっては回り込みがうまくいかず、段組が崩れてしまうなど、初心者を悩ませる問題がたくさんあったのです。

そこで2012年頃から登場したのが、Flexboxを使ったレイアウトです。それまでにさまざまなCSSフレームワークが登場し、多くのフロントエンドエンジニアやWebデザイナーはfloatでのレイアウトの問題を解決するためにこうしたフレームワークを活用していました。

しかし、Flexboxでのレイアウトも、場合によってはレイアウトがはみ出してしまうことがあったりと、万能ではありませんでした。その問題を解決する新しい選択肢が、**「CSSグリッド」**なのです。

そこで今回は、今までのレイアウトの概念とは一線を画す「CSSグリッド」レイアウトの基礎を、まとめました。Flexboxの代替としてCSSグリッドが語られることが多いですが、本質的なレイアウト手法は全く異なったものなので、改めておさらいをしておきましょう。

「回り込み」、レスポンシブデザイン、そしてFlexboxの登場。

Foundation / スクリーンショット：2017年9月

まずは、「CSSグリッド」について触れる前に、いままで主流だったFlexboxを使ったレイアウトに関して、その特徴をみておきましょう。

2012年前後のWebデザインの世界では、Twitter社の*「Bootstrap」やZurb社の「Foundation」など、レイアウトを解決するためのさまざまなフレームワークが脚光を浴びていました。しかし、こうしたフレームワークは、あくまでも古い技術を組み合わせてパッケージ化しているにすぎず、回り込みを最適化するグリッドシステムも段組を行うための一時的な措置にしか過ぎなかった*のです。

そこで注目を浴びたのが、Flexboxを使ったレイアウトです。グリッドシステムを使わなくとも、CSS3とHTML5で直接段組を行うことができるようになったのです。

Flexbox自体はそれ以前から存在していましたが、仕様が何度も変わってしまって、使いにくいものでした。しかし、2012年9月にようやく仕様が固まってきました。また、時代背景として、レスポンシブデザインが非常に注目を浴びた時期でもあったので、レスポンシブデザインとの相性がよかったのもFlexbox普及の起爆剤だったと言われています。

Flexboxのベースも「回り込み」操作

Flexboxは、本来的な名前を*「Flexible Box Layout Module」*と言います。その名の通り、(インライン要素ではなく)ボックス要素を並べ、フレキシブルに回り込みを制御することができる画期的な仕様です。

Flexboxを理解する上で重要なのは、親要素と子要素を分けて考えることです。Flexboxを適用する範囲を決めて、その中で並び替えを行うので、親要素であるFlexboxコンテナーの中で子要素であるFlexboxアイテムが回り込みを制御される形になります。

筆者作成

親要素のFlexboxコンテナーでは、flex-directionで子要素の配置方向を横方向・縦方向などに指定することができたり、flex-wrapで折り返し位置を指定したりすることができます。また、justify-contentで子要素を揃えたり、align-itemsで子要素の高さやベースラインを指定することも可能です。

よくある*聖杯レイアウト(Holy Grail Layout)*も、Flexboxは簡単にレイアウトできます。聖杯レイアウトとは、上方にヘッダー、下方にフッター、中部左右にナビゲーションを配置して真ん中にコンテンツを置く、20世紀後半に主流だった典型的な段組のことです。

筆者作成

上の図の聖杯レイアウトで言えば、中央部分にFlexコンテナーを配置し、メディアクエリでflex-directionなどを操作するだけで、簡単にスマートフォン対応のレスポンシブデザインを実装することができます。

これだけ読むだけでも、多くの方が*「Flexboxはすごい！」と思っていただけると思います。ただし、繰り返すように、Flexboxは要素の「回り込み」を自由自在に扱うものであり、まれにword-wrap: break-word;*などの影響を受けて、子要素であるボックスの中身によっては回り込みがうまくいかなくなるなど、万能ではありませんでした。

2次元レイアウト「CSSグリッド」の登場

そこで近年期待を浴びているのが、「CSSグリッド」を活用したレイアウトです。今までのレイアウトの問題は、「回り込み」の制御にばかり気をとられていたことです。では、なぜそもそも「回り込み」が発生するのでしょうか？

答えは、*「段組が1次元的だから」*です。

コーディングは上から下にコードを書いていきますが、そうしたコードによって生成された要素は、CSSで指定をしなければ、すべて上から下に縦並びになっています。それを無理矢理、CSSによって横並びにしたりしているのです。

しかし、「CSSグリッド」レイアウトはそうしたレイアウトとは違って、*「2次元レイアウト」(two-dimentional layout)*を採用しています。つまり、ブロックを作って並べるのではなく、1枚のブロックを縦方向や横方向に区切っていいく、という考え方です。

筆者作成

CSSグリッドで押さえておきたい7つの概念

Flexboxで最低限押さえておきたいのは、親要素であるFlexboxコンテナーと、子要素であるFlexboxアイテムの概念です。

それでは、CSSグリッドのほうはどうでしょうか？

1. グリッドコンテナー

まず、Flexboxと同様に、CSSグリッドでも親要素があり、これをグリッドコンテナーと呼びます。グリッドコンテナーの中に、子要素であるグリッドアイテムを配置していくことになります。

2. グリッドアイテム

グリッドアイテムは、親要素であるグリッドコンテナーの中に配置される子要素です。ただし、Flexboxアイテムとは違い、並べられたブロックというよりも、あくまでもグリッドコンテナーを区切るためのブロックであることに注意するべきです。

3. グリッドライン

さて、ここからがFlexboxと大きくことなる部分です。

CSSグリッドレイアウトでは、要素を縦・横の2つの線を使って段を作成していきます。

筆者作成

グリッドラインは、垂直方向に分割する*「列」(column)と、水平方向に分割する「行」(row)*に分割されます。

筆者作成

グリッドラインは数字によって参照することができ、最初のラインを1として数えていきます。また、一番最後のラインも数字として数えていくことに注意しておきましょう。

4. グリッドセル

筆者作成

列と行の2本の線で区切られたところが、グリッドセルと呼ばれるものです。イメージとしてはテーブルセルに近いとも言えます。

5. グリッドトラック

筆者作成

グリッドトラックとは、2本の列もしくは行で区切られた垂直・水平の連続したグリッドセルです。エクセル操作を行うように、CSSグリッドでも縦横の1行列を操作できます。

6. グリッドエリア

筆者作成

グリッドエリアは、4つのグリッドラインで区切られた1つ以上の四角形のエリアのことです。グリッドエリアを操作して何らかの処理を加えることもあります。

7. グリッドギャップ

グリッドギャップとは、グリッドトラック間の空白スペースのことです。より一般的に言えば、「ガーター」(gutter)とも呼ばれているようです。

CSSグリッドの基本的な使い方

CSSグリッドは使い込むと非常に奥深く、複雑なレイアウトも簡単に作れてしまいます。ここでは、CSSグリッドを使うための基本的な手順を2ステップに分けて紹介していきます。

筆者作成

上の5つのエリアを、CSSグリッドを使って指定していきましょう。

ステップ1：グリッドを定義しよう

CSSグリッドの使い方は、以下の通りです。

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

はじめに、display: gridを指定することで親要素をグリッドコンテナー化します。

次に、grid-template-columnsプロパティを指定して縦の線を引っ張ります。均等に分割するために、*「fr」(fractions)*という単位を利用できます。

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

筆者作成

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

grid-template-rows: auto 1fr 3fr;

筆者作成

すると、9つのエリアに分割されました。

筆者作成

以上の図では、左上から順に5つエリアが並ぶことになります。

ステップ2：グリッドにアイテムを配置しよう

それでは、この9つのグリッドエリアに自由自在に要素を配置していきましょう。方法は簡単で、grid-columnを指定するだけです。

筆者作成

例えば上記のように指定する場合には、

grid-column: 2/4;

をCSSに指定するだけで、簡単に意図した位置に要素を配置することができます。

筆者作成

同様に、

grid-row: 2/3;

を指定すれば、一段ずれる形になります。

.masthead{
　　grid-column: 2/4;
　　grid-row: 2/3;
}

.page-title{
　　grid-column: 1/4;
　　grid-row: 1/2;
}

.main-content{
　　grid-column: 1/2;
　　grid-row: 2/4;
}

// 以下同様

最終的には、5つの要素をこのように配置することができました。

CSSグリッドを使いこなし自由なレイアウトを

今回はCSSグリッドの導入部分に関して触れていきましたが、CSSグリッドを使いこなせば、さらに自由なレイアウトを実装することが可能です。そのための第一歩として、Flexboxなどの従来のレイアウト手法とCSSグリッドのレイアウトとの違いを理解しておくことは、非常に重要なことです。

CSSグリッドの理解をさらに深める

とうとうやってきた！CSSの新しいレイアウトモジュール「CSS Grid」って？

CSSに搭載された「CSS Grid」とは、従来のフレームワークを使った段組とはどんなところが違うのでしょうか。 今回は、CSSの標準的なレイアウトモジュールになりそうな「CSS Grid」の概要をご紹介します。