CSSの新しいレイアウトモジュール「CSS Grid」を使って、レスポンシブ対応の3カラムレイアウトを実装するチュートリアル

Post on:2016年4月14日

「Holy Grail Layout（聖杯レイアウト）」とは

「Holy Grail Layout（聖杯レイアウト）」とは、ヘッダ、フッタ、メインコンテンツ、両側のサイドバーの4つのセクションで構成された3カラムのレイアウトです。レイアウトは次の仕様を厳守します。

中央のコンテンツは可変、両側のサイドバーは固定の幅です。
マークアップではコンテンツは、2つのサイドバーより上に記述されます。
コンテンツとサイドバーはそれぞれの内容に関わらず、同じ高さです。
コンテンツがビューポートの高さに満たない時でも、フッタは一番下に配置されます。
レスポンシブ対応にする時、小さいビューポートではすべてのセクションが1つのカラムで積み重なって配置されます。

今までは、CSSハック無しでこれらの仕様をすべて実装するのは非常に困難でした。

「CSS Grid」で3カラムレイアウトを実装

「CSS Grid」を使用すると、非常にスマートに実装できます。
まずは、マークアップ。

<body class="hg">  
  <header class="hg__header">Title</header>
  <main class="hg__main">Content</main>
  <aside class="hg__left">Menu</aside>
  <aside class="hg__right">Ads</aside>
  <footer class="hg__footer">Footer</footer>
</body>

<header class="hg__header">Title</header>

<main class="hg__main">Content</main>

<footer class="hg__footer">Footer</footer>

</body>

そしてCSSはレスポンシブ対応も含めて、たった31行です。
見慣れないプロパティ、記述方法、単位があると思います。

.hg__header { grid-area: header; }
.hg__footer { grid-area: footer; }
.hg__main { grid-area: main; }
.hg__left { grid-area: navigation; }
.hg__right { grid-area: ads; }

.hg {
    display: grid;
    grid-template-areas: "header header header"
                         "navigation main ads"
                         "footer footer footer";
    grid-template-columns: 150px 1fr 150px;
    grid-template-rows: 100px 
                        1fr
                        30px;
    min-height: 100vh;
}

@media screen and (max-width: 600px) {
    .hg {
        grid-template-areas: "header"
                             "navigation"
                             "main"
                             "ads"
                             "footer";
        grid-template-columns: 100%;
        grid-template-rows: 100px 
                            50px 
                            1fr
                            50px 
                            30px;
    }
}

.hg__header { grid-area: header; }

.hg__footer { grid-area: footer; }

.hg__main { grid-area: main; }

.hg__left { grid-area: navigation; }

.hg__right { grid-area: ads; }

.hg {

display: grid;

grid-template-areas: "header header header"

"navigation main ads"

"footer footer footer";

grid-template-columns: 150px 1fr 150px;

grid-template-rows: 100px

1fr

30px;

min-height: 100vh;

}

@media screen and (max-width: 600px) {

.hg {

grid-template-areas: "header"

"navigation"

"main"

"ads"

"footer";

grid-template-columns: 100%;

grid-template-rows: 100px

50px

1fr

50px

30px;

}

ブラウザで表示すると、下記のようになります。

「Holy Grail Layout（聖杯レイアウト）」の完成サンプル

実装の解説

「CSS Grid」は慣れないうちは非常に難しく感じるかもしれません。しかしこのレイアウトを実装するために私が使ったのは、17個の新しいプロパティの中のたった4つです。

grid-area
grid-template-areas
grid-template-columns
grid-template-rows

この4つのプロパティを使った「Holy Grail Layout（聖杯レイアウト）」の実装を5つのステップで紹介します。

Step 1. グリッドの定義

まずは「grid-area」プロパティを使って、グリッドの定義をしてみましょう。ヘッダ・フッタ・コンテンツ・2つのサイドバーのエリアを定義します。

.hg__header { grid-area: header; }
.hg__footer { grid-area: footer; }
.hg__main { grid-area: main; }
.hg__left { grid-area: navigation; }
.hg__right { grid-area: ads; }

.hg__header { grid-area: header; }

.hg__footer { grid-area: footer; }

.hg__main { grid-area: main; }

.hg__left { grid-area: navigation; }

.hg__right { grid-area: ads; }

次に「grid-template-areas」プロパティを使って、グリッドのレイアウトを視覚的に指定します。各エリアをスペースで区切り、リスト状に記述します。
スタイルシートの各行はグリッドの横列を表しており、定義されたそれぞれのエリアが1つの縦列で、エリアが複数のカラムにまたがる時には複数記述します。

「Holy Grail Layout（聖杯レイアウト）」は3つの縦列と3つの横列があるため、ヘッダとフッタの横列には、縦列3つ分の定義をします。

.hg {
    display: grid;
    grid-template-areas: "header header header"
                         "navigation main ads"
                         "footer footer footer";
}

.hg {

display: grid;

grid-template-areas: "header header header"

"navigation main ads"

"footer footer footer";

}

グリッドの定義を行うと、下記のように表示されます。

グリッドの定義

Step 2. カラムの幅を定義

続いて「grid-template-columns」プロパティを使って、縦列の幅を定義してみましょう。
このプロパティはスペースで区切られたアイテムの幅を明確にします。レイアウトでは3つの縦列があるので、3つの幅を指定します。

grid-template-columns: [column 1 width]  [column 2 width]  [column 3 width];

1	grid-template-columns: [column 1 width] [column 2 width] [column 3 width];

「Holy Grail Layout（聖杯レイアウト）」では2つのサイドバーは固定なので、150pxを定義します。

.hg {
  grid-template-columns: 150px  [column 2 width] 150px;
}

.hg {

grid-template-columns: 150px [column 2 width] 150px;

}

真ん中のコンテンツは残りのスペース全部を定義したいので、新しい単位「fr」で定義します。「fr」はfraction（割合）の略で、利用可能なスペースを補助単位で分割した「1」つ分の領域が割り当てられます。このケースでは、全体から150px+150pxをマイナスした分になります。

.hg {
    grid-template-columns: 150px 1fr 150px;
}

.hg {

grid-template-columns: 150px 1fr 150px;

}

カラムの幅の定義を行うと、下記のように表示されます。

Step 3. カラムの高さを定義

「grid-template-columns」で幅を定義したので、今後は「grid-template-rows」プロパティを使って、高さを定義してみましょう。幅と同様にスペースで区切って定義しますが、コードが視覚的に分かりやすいように改行しました。

.hg {
    grid-template-rows: 100px 
                        1fr
                        30px;
}

.hg {

grid-template-rows: 100px

1fr

30px;

}

ヘッダの高さは100px固定、フッタの高さは30px固定、コンテンツとサイドバーは残りのスペースです。

Step 4. フッタは常に一番下に配置

「Holy Grail Layout（聖杯レイアウト）」ではコンテンツの量が少なくてもフッタは成り行きで表示されるのではなく、常に一番下に配置されるようにします。これを実現するのは簡単で、bodyに指定した.hg要素の最小の高さを「100vh」に定義します。

.hg {
    min-height: 100vh;
}

.hg {

min-height: 100vh;

}

bodyの最小の高さがブラウザいっぱいの高さと同じになり、コンテンツに「1fr」の指定があるので、コンテンツの量が少なくてもフッタは一番下に配置されます。

Step 5. 最後はレスポンシブ対応に

最終的に、レイアウトをレスポンシブ対応にすることを望むでしょう。小さいスクリーンではすべてのグリッドのアイテムは垂直に配置されるべきです。これを実現するためには「grid-template-areas, grid-template-columns, grid-template-row」の3つのプロパティを再定義します。

まずは小さいスクリーンで表示される順番を上から定義します。

@media screen and (max-width: 600px) {
    .hg {
        grid-template-areas: "header"
                             "navigation"
                             "main"
                             "ads"
                             "footer";
    }
}

@media screen and (max-width: 600px) {

.hg {

grid-template-areas: "header"

"navigation"

"main"

"ads"

"footer";

}

そして、幅はスクリーンいっぱいに定義します。

@media screen and (max-width: 600px) {
    .hg {
        grid-template-columns: 100%;
    }
}

@media screen and (max-width: 600px) {

.hg {

grid-template-columns: 100%;

}

最後は高さです。コンテンツ以外はすべて固定の高さを指定し、コンテンツは「1fr」を定義します。

@media screen and (max-width: 600px) {
    .hg {
        grid-template-rows: 100px /* Header */
                            50px /* Navigation */
                            1fr /* Main Content */
                            50px /* Ads */
                            30px; /* Footer */
    }
}

@media screen and (max-width: 600px) {

.hg {

grid-template-rows: 100px /* Header */

50px /* Navigation */

1fr /* Main Content */

50px /* Ads */

30px; /* Footer */

}

小さいスクリーンで表示すると、下記のように表示されます。

デモページ

実際のデモは、下記ページでご確認ください。

デモページ
※デモを表示するには、ブラウザの設定を変更（設定は下記に）

ブラウザのサポート状況

アップデート（2017年3月9日）: 本日リリースされたChome 57で、デスクトップ用のすべてのブラウザがサポートしました。

CSS Gridの各ブラウザのサポート状況

参考までに、2016年のものもそのまま残しておきます。

2016年4月現在「CSS Grid」を正式にサポートしているブラウザはありませんが、各ブラウザにその機能は実装されています。
ベンダプレフィックスを付与したり、ブラウザの設定を変更することで「CSS Grid」を利用できます。

各ブラウザで「CSS Grid」を使えるようにする方法

Chrome: 「試験運用版のウェブプラットフォームの機能」をチェック; chrome://flags/#enable-experimental-web-platform-features
Firefox: 「about:confit」で「layout.css.grid.enabled」をチェック
IE10: 「-ms」を加える。
Opera: 「試験運用版のウェブプラットフォームの機能」をチェック; opera://flags/#enable-experimental-web-platform-features
Safari: 「-webkit」を加える。