CSS Grid の使い方をマスターして float を卒業しよう

CSS Grid とは

最近、Web ではグリッドレイアウトを取り入れたデザインが増えてきました。しかしグリッドレイアウトをWeb上で実現するためには float や padding、margin など様々なプロパティを駆使して地道に実装するか、 JavaScript の力を借りるしかありませんでした。

IE9 の正式サポートが終了した今では flexbox を使う方法もありますが、基本的に flexbox は縦方向か横方向のどちらか一方向にコンテンツを並べることは得意ですが、それ以上のことはできません。しかし CSS Grid の登場により、縦方向や横方向の区別がない複雑なレイアウトも比較的簡単にWeb上実現することができるようになりました。

例えば以下のような Pinterest で採用されているレンガ調のレイアウトは flexbox では実現することが難しいですが、CSS Grid を使うと実装が可能です。

Pinterestで採用されているGridレイアウト

どんな時に使うか

先ほど紹介した Pinterest の例でおわかりいただけるように、CSS Grid は要素を紙面のように自由なレイアウトで配置することが得意です。float や JavaScript で実装しないといけないような複雑なレイアウトを CSS Grid でサクッと実装しちゃいましょう。

使用例 & DEMO

以下のソースコードは先ほどのようなレンガ調のレイアウトを CSS だけで実現しているサンプルコードになります。

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
  grid-auto-rows: 20px;
}

同じことを CSS Grid を使わないで実装する場合、 Masonry.js などの JavaScript ライブラリなどを利用して実装する必要があります。以下は Masonry.js を使って同じことを実現しているサンプルコードになります。

<script src="/path/to/masonry.pkgd.min.js"></script>
<div class="grid">
  <div class="grid-item">...</div>
  <div class="grid-item">...</div>
  <div class="grid-item">...</div>
  ...
</div>
<style>
.grid-item { 
  width: 250px; 
}
</style>
<script>
$('.grid').masonry({
  // options
  itemSelector: '.grid-item',
  columnWidth: 250
});
</script>

float や flexbox との大きな違い

float や flexbox は基本的に一次元にレイアウトするため、コンテンツをどこに配置するかを決めることはできません。下の図のようにコンテンツが親要素の幅に達したら折り返して表示することしかできません。

float や flexbox ではコンテンツが折り返している

一方で CSS Grid は縦横の二次元にコンテンツをレイアウトできます。

CSS Gridでは親要素内で自由に配置を決めることができる

下のコードは、container 要素の中の子要素、header, main, sidebar, footer の配置を指定するCSSのサンプルです。

.container {
    display: grid;
    height: 100%;
    grid-template-rows: 1fr 3fr 1fr;
    grid-template-areas:
        "header  header header"
        "main   main sidebar"
        "footer  footer footer";
}

上の記述により下のようなレイアウトになります。

サイト全体のレイアウトをCSS Gridだけで明示的に定義できてしまうのです。
また、下のようにメディアクエリーを使えばレスポンシブ対応も簡単に実装できます。

@media (max-width: 480px) {
  .container {
    grid-template-areas:
      "header   header  header"
      "main     main    main"
      "sidebar  sidebar sidebar"
      "footer   footer  footer";
  }
}

ブラウザの対応状況

Edge, Firefox, Chrome Safari などモダンなWebブラウザなら動作します。

実は IE でも CSS Grid は実装されています。実は CSS Grid がはじめに導入されたブラウザは IE10 です。しかし IE では CSS Grid の昔の仕様を引きずっているため、現在の仕様だとサポートされていないプロパティーも多く、他のブラウザーと同じ記述ではうまく動かない場合もあります。またIEの場合 -ms- の prefix が必要になります。

CSS Gridで使用される用語説明

CSS Grid を理解する上で、その用語を理解することで理解が深まります。ここでは CSS Grid で使用される用語を解説します。

グリッドコンテナー（Grid Container）

display: grid が指定された親要素。この中身のコンテンツをレイアウト可能になります。

グリッドアイテム（Grid Item）

一方で、 grid-itemは display:grid が指定された親要素の子要素にあたります。

その他の用語解説

グリッドライン

グリッドコンテナーを分解するグリッド線
行分割のための row line と列分割のための col line がある。

グリッドセル

グリッドラインによって分解されたアイテムを構成する最小単位

グリッドエリア

いくつかのセルがいくつかのセルが集まってできた範囲。ここにグリッドアイテムが設置できます。

CSS Gridを使ってみよう

CSS Grid の知識がついたところで早速 CSS Grid を使ってみましょう！

コンテナーを作ろう

まずは Grid Layout をしたいエリアの親となる要素に display: grid を指定します。
今回は、結果がわかりやすいようにコンテナー幅を 100vw （スクリーンの横幅いっぱい）コンテナーの高さを 100vh （スクリーンの縦幅いっぱい）にしています。

.container {
   display: grid;
   width: 100vw;
   height: 100vh;
}

display:grid を指定した要素がグリッドコンテナーの役割をします。

グリッド幅を指定しよう

次にグリッド幅を指定します。grid-template-rows、 grid-template-columns を使うことによってコンテナーを見えざるグリッドラインで分割することができます。

.container {
    display: grid;
    width: 100vw;
    height: 100vh;
    grid-template-rows: 1fr 3fr 1fr;
    grid-template-columns: 1fr 2fr 2fr 1fr;
}

上記のコードでグリッドエリアが行に対して1:3:1、列に対して1:2:2:1で分割されました。

グリッドコンテナーを行に対して1:3:1、に対して1:2:2:1で分割した

グリッドの間隔を指定しよう

さらに、gapプロパティによってグリッドエリア間に間隔を空けることができます。

.container {
    display: grid;
    width: 100vw;
    height: 100vh;
    grid-template-rows: 1fr 3fr 1fr;
    grid-template-columns: 1fr 2fr 2fr 1fr;
    gap: 3px 5px;
}

グリッドエリアに対して行に3px、列に5pxの間隔を空けた

以下のように行、列それぞれに対して間隔を指定することも可能です。

grid-column-gap: 3px;
grid-column-gap: 5px;

アイテムを配置しよう

いよいよ作ったグリッドの中にアイテムを配置します。
例えば先ほど設定したグリッドエリアに対して、以下のようにグリッドアイテムを設置してみましょう。

グリッドエリアに対してheader, main, footer を設置

grid-template-areas プロパティを使うことで直感的にグリッドアイテムをエリアないに配置することができます。

列4分が header にあたるので grid-template-areas の最初の行に対して、header header header header。

main は最初と最後の列をスキップしているので . main main .

footer は header と同じく列4つ分のエリアを占めているので footer footer footer footer と記述します。

CSS例

.container {
    display: grid;
    width: 100vw;
    height: 100vh;
    grid-template-rows: 1fr 3fr 1fr;
    grid-template-columns: 1fr 2fr 2fr 1fr;
    gap: 3px 5px;
    grid-template-areas: 'header header header header'
                         '.      main   main   .'
                         'footer footer footer footer';
}
.header {
    grid-area: header;
}
.footer {
    grid-area: footer;
}
.main {
    grid-area: main;
}

HTML例

<div class="container">
    <header class="header"></header>
    <main class="main"></main>
    <footer class="footer"></footer>
</div>

終わりに

CSS Grid は全く新しい概念なので、見慣れない単語が多く、最初は理解が大変かもしれません。

しかし CSS Grid の概念や用語さえ覚えてしまえばそれほど難しくありません。むしろ今までのレイアウト作成のために書いていた CSS よりもはるかに直感的に記述することができます。

他にもCSS Gridを便利に記述するための CSS プロパティや CSS 関数はいくつかあります。それらも CSS Grid の概念を理解していれば簡単に覚えることができるはずです。

CSS Grid は少し手を出せていなかった人もまずはこの記事を読んで CSS Grid のはじめの一歩を踏み出していただければ幸いです。