最低限の CSS のみで Masonry のようなグリッドレイアウトを組む方法

今回は、高さの異なるコンテンツを隙間なく敷き詰めるレイアウトを CSS だけで実現する方法をご紹介します。
Javascript や CSS のライブラリは使わず、ピュア CSS のみで手軽に実装してみました。

まず、はじめに今回作るレイアウトについて確認しておきます。
百聞は一見にしかず、ということで実際のウェブサイトを例に見てみましょう。

STUDIO LEMON DENCHI

インテリアショップ unico | ブランドサイト

ご覧のような、高さの違うパネルがタイル状にびっしりと敷き詰められたレイアウトが今回作ろうとしているものです。
画像が多く、あえて整然とした配置のリズムを崩しているので、楽しげに見えるレイアウトですね。

これを CSS の float や flex-box を使って実装しようとしても、なかなか困難です。
また、こうしたレイアウトを実現するためのライブラリが色々と出ていますが、実装が結構手間だったり、そのライブラリが求める HTML 設計に従う必要があったりします。
そうした背景から、手軽に簡単なグリッドレイアウトを実現したいときには使いづらいことも多いです。

ということで、今回はこうしたレイアウトのためのライブラリとして有名な「Masonry」や「driveway」を使わずに、CSS だけで作ってみます。

作ってみたサンプルがこちらになります。
画面の横幅が 800px より広い場合は3カラム、480px より広い場合は2カラム、それ以下の場合は1カラムのレイアウトに変化します。

それでは、CSS の中でポイントとなる部分を説明していきたいと思います。

グリッドレイアウト全体を囲む親に「container」、その中にある各パネルに「grid」というクラスを振っています。
基本的にはこの2種類の要素に対してスタイルを適用することで、グリッドレイアウトを実現しています。

親となる「container」のスタイルは下記のとおりです。

.container {
  margin: 0 auto;
  padding: 5px;
  width: 90%;
  background-color: #fff;
  column-count: 3;
  column-gap: 0;
}

マルチカラム化のポイントになるのは下記の箇所です。

column-count: 3;

ここでカラム数をいくつにするかを決めています。
指定した数値に従い「container」内のコンテンツが自動的に3つのカラムに振り分けられます。

また、デフォルトで各カラム間の余白が取られるようになっているので、自分で制御したい場合は

column-gap: 0;

上記のように、「column-gap」で設定してやります。

前述の設定だけでもざっくりとしたグリッドレイアウトが実現できるのですが、一つ問題が残ります。
この状態では、子要素である「grid」の途中でも折り返されてしまうのです。
一つのパネルが別のカラムに分かれて表示されるのは理想的ではないので、これを回避するための指定を追加します。

.grid {
  padding: 5px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

上記のように「break-inside」や「-webkit-column-break-inside」に対して「avoid」を指定することによって、grid 要素内での折り返しを防ぐことが可能になります。

これで、グリッドレイアウトの完成です。
これぐらいのレイアウトであれば、少し CSS を書くだけで実現できるのがご理解いただけたのではないでしょうか。

ブラウザの横幅に応じて伸縮するようになっているとはいえ、やっぱり狭くなるに従いカラム数が減っていき、スマホサイズでは1カラムになるようにしたいですよね。
この設定も簡単で、「column-count」の値をメディアクエリを使って変更してやるだけです。

@media (max-width: 800px) {
  .container {
    column-count: 2;
  }
}

@media (max-width: 480px) {
  .container {
    column-count: 1;
  }
}

こんな具合に横幅に応じて container の「column-count」を変えていけば、よりレスポンシブなグリッドレイアウトが作成できます。

caniuse.com によると、ほぼ全てのモダンブラウザで動作します。
webkit 向けにプレフィックスを付けさえすれば、96%以上（2017年7月時点）の環境で動くので、充分導入できる環境になっています。

今回は、CSSのみでグリッドレイアウトを作成する方法をお伝えしました。
float, flex-box, column-count, CSS Grid Layout など、CSS でのレイアウト方法も多岐にわたってきています。
JavaScript や CSS のライブラリやフレームワークも含めれば選択肢が無数にある状態です。
実現したいレイアウトや仕様に合わせて最適な手段を選べるよう、CSS でのレイアウトパターンだけでも、一通り特徴や実装方法を抑えておきたいところですね。