グリッドレイアウトのための新しいCSSプロパティがあるんだって

「display: grid」なる存在を知る

グリッドレイアウトを表現するCSSとして、新たに「display: grid」というプロパティが登場するということを知った私です。

調べてみると、現在リリースされている最新版ブラウザにはどれもまだ実装されていません。次のメジャーアップデートから投入されるようです。（2017年2月現在）

Can I use…: CSS Grid Layout

そのため、まだ実戦に投入することは出来ませんが、将来確実に必要となってくる仕様なのでいまのうちに抑えておこうと思います。

ブラウザのメジャーアップデートで対応済み【2017.4.6追記】

あーだこーだ言っているうちに対応されました。正直なところもう実戦でもガンガン使えるんじゃないかと思っています。

まず従来のグリッドレイアウトを実現するCSSをふりかえってみる

floatをつかう、従来のレイアウト方法

Webレイアウトの定番となったグリッドレイアウト。すこし前までは、カラムをfloatさせる方法が一般的でした。

<div id="grid-container">
  <div class="grid-items">
    <h2>grid-1</h2>
    <p>グリッドレイアウトの1つ目のカラムです。このあとにもカラムが続きます。</p>
  </div>
  <div class="grid-items">
    <h2>grid-2</h2>
    <p>グリッドレイアウトの2つ目のカラムです</p>
  </div>
  <div class="grid-items">
    <h2>grid-3だけ文字数を増やしてみる</h2>
    <p>グリッドレイアウトの3つ目のカラムです</p>
  </div>
  <div class="grid-items">
    <h2>grid-4</h2>
    <p>グリッドレイアウトの4つ目のカラムです</p>
  </div>
  <div class="grid-items">
    <h2>grid-5</h2>
    <p>グリッドレイアウトの5つ目のカラムです</p>
  </div>
</div>

/*
* floatでのグリッドレイアウト
*/

#grid-container {
  padding: 0 15px;
}

/* clearfixの設定 */
#grid-container:before,
#grid-container:after {
  content: "";
  display: table;
}
#grid-container:after {
  clear: both;
}

/* 1列に4つのカラムを並ばせる */
.grid-items {
  float: left;
  /* margin-left分をひく */
  width: calc(25% - 15px);
  padding: 15px;
  margin-bottom: 15px;
  margin-left: 15px;
  background: #EEE;
}

/* 左端のカラム */
.grid-items:nth-of-type(4n+1) {
  width: 25%;
  margin-left: 0;
  clear: both; /* カラム落ちを防ぐ */
}

この方法では、カラムの高さを一致させるために、固定した高さを指定するか、javascriptを用意するなど、工夫が必要でした。整ったレイアウト構築のためには少し手間のかかる方法という印象。

そこに現れたFlexible Box

グリッドレイアウトをより簡単に表現できるのが「display: flex」です。仕様がころころ変わって、CSSの表記方法がたくさんあって混乱しましたが、ようやく落ちつき、現在ではほぼすべてのモダンブラウザで実装されています。（2017年2月現在）

Can I use…: Flexible Box Layout Module

上記のHTMLにflexを使用したCSSを当ててみます。

#grid-container {
  display: flex;

  /* コンテナの端に達したら折り返す */
  flex-wrap: wrap;

  /* flexアイテムの縦位置の指定 */
  align-items: stretch;

  padding: 0 15px;
}

.grid-items {
  width: calc(25% - 15px);
  margin-left: 15px;
  margin-bottom: 15px;
  padding: 15px;
  background: #EEE;
}

/* 左端のカラム */
.grid-items:nth-of-type(4n+1) {
  width: 25%;
  margin-left: 0;
}

グリッドを囲む部分のDiv要素に「align-items: stretch」を指定してやれば、自動的にカラム（背景色がグレーの部分）の高さを揃えてくれます。

「display: grid」でグリッドレイアウト

gridではこう指定する

#grid-container {
  display: grid;

  /*
  * 水平位置の並び、幅の指定
  */
  grid-template-columns: 1fr 1fr 1fr 1fr;
 
  /*
  * grid間の空白の大きさを指定
  * 以下でも同じ
  * grid-row-gap: 15px;
  * grid-column-gap: 15px;
  */
  grid-gap: 15px;

  padding: 0 15px;
}

.grid-items {
  padding: 15px;
  background: #EEE;
}

こうなります。見た目はまったく一緒です。

「grid-template-columns」で、1列に並ぶカラムの数と幅を指定しています。「fr」は、「fraction（分数）」の略（定かでない）らしく、相対的な大きさを表します。

従って、上の例では、
「1:1:1:1で4つカラムが並ぶ」
と、いう意味になります。

他にもいろいろと指定方法があります。

もう少し詳しく触れてみる

軽い気持ちでさわってみようと思い、ドキュメントを読み出しましたが、プロパティやプロパティの指定方法が結構たくさんあり、新しい（自分が知らなかっただけですが）ものも出現しておりました。

もうちょっと基本的な使い方についていずれ触れてみたいと思います。

もうちょっと触ってみた→ Grid Layout Module (display: grid)のプロパティや使い方に触れてみる