今回は、写真共有に特化したSNSでおなじみのPinterestのようなグリッドレイアウトをCSSのみで再現してみたいと思います。このグリッドレイアウトはブログサイトやキュレーションサイトでもよく見かけますので使用機会も多いのではないでしょうか。
どんなグリッドレイアウト？
Pinterestで採用されているグリッドレイアウトは次のような特徴があります。
- ・レスポンシブデザインである
- ・マルチカラム（複数列）で列の数がスクリーンサイズの幅で変動する
- ・列ごとに各グリッドの高さが揃っていなくても上に詰めて表示される
完璧に再現しようとなるとjQueryなどを使って動的にレイアウトを生成する必要があるのですが、実装するにはすこし面倒です。。しかし、CSSだけで実装できるとなると比較的ラクに取り入れることができるのではないでしょうか。
グリッドレイアウトを実装する
では早速コーディングで実装していきたいと思います。結構シンプルなコードで実装することができます。下記にまとめていますのでご確認ください。
【HTML】
<div class="grid-container"> <div class="grid"> </div> <div class="grid"> </div> <div class="grid"> </div> <div class="grid"> </div> <div class="grid"> </div> <div class="grid"> </div> </div>
【CSS】
@media screen and (min-width: 1200px) {
.grid-container {
-webkit-column-count: 3;
-webkit-column-gap: 15px;
-webkit-column-fill: balance;
-moz-column-count: 3;
-moz-column-gap: 15px;
-moz-column-fill: balance;
column-count: 3;
column-gap: 15px;
column-fill: balance;
}
}
@media screen and (min-width: 993px) and (max-width: 1199px) {
.grid-container {
-webkit-column-count: 3;
-webkit-column-gap: 15px;
-webkit-column-fill: balance;
-moz-column-count: 3;
-moz-column-gap: 15px;
-moz-column-fill: balance;
column-count: 3;
column-gap: 15px;
column-fill: balance;
}
}
@media screen and (min-width: 769px) and (max-width: 992px) {
.grid-container {
-webkit-column-count: 3;
-webkit-column-gap: 15px;
-webkit-column-fill: balance;
-moz-column-count: 3;
-moz-column-gap: 15px;
-moz-column-fill: balance;
column-count: 3;
column-gap: 15px;
column-fill: balance;
}
}
@media screen and (min-width: 481px) and (max-width: 768px) {
.grid-container {
-webkit-column-count: 2;
-webkit-column-gap: 15px;
-webkit-column-fill: balance;
-moz-column-count: 2;
-moz-column-gap: 15px;
-moz-column-fill: balance;
column-count: 2;
column-gap: 15px;
column-fill: balance;
}
}
@media screen and (max-width: 480px) {
.grid-container {
-webkit-column-count: 1;
-webkit-column-gap: 15px;
-webkit-column-fill: balance;
-moz-column-count: 1;
-moz-column-gap: 15px;
-moz-column-fill: balance;
column-count: 1;
column-gap: 15px;
column-fill: balance;
}
}
.grid {
display: inline-block;
-webkit-break-inside: avoid;
-moz-break-inside: avoid;
break-inside: avoid;
}
/* Google Chorome BugFix */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.grid {
display: block !important;
}
}
まずはHTMLの方ですが、グリッドを囲うコンテナ要素としてdiv（class名をgrid-containerとしています）を設置します。そしてその中に入れるグリッドの要素としてdiv（class名をgridとしています）を挿入します。グリッドをコンテナ要素で囲うシンプルな構成になっています。
次にCSSですが、画面幅によってグリッドのカラム数を変更するためそれぞれのメディアクエリーを用意します。各メディアクエリー内でコンテナ要素であるgrid-containerのdivに対してカラム数や、カラム間の余白などを設定していきます。
今回はCSSのみで可変グリッドレイアウトを実装しますが、columnプロパティを使ってレイアウトを決めていきます。このプロパティを使うことでシンプルかつ簡単にグリッドレイアウトが実装でき、グリッドのカラム数も自由にコントロールが可能になります。
CSSでマルチカラムが実装できるcolumnプロパティ
それでは実際にプロパティを詳しく見ていきます。主なプロパティは下記になります。
- ・レスポンシブデザインである
- ・マルチカラム（複数列）で列の数がスクリーンサイズの幅で変動する
- ・列ごとに各グリッドの高さが揃っていなくても上に詰めて表示される
【カラム数を決める】
column-countプロパティの値にカラム数となる数値を入れます。column-count: 3;となると3列のレイアウトになります。
【カラム間の余白を決める】
column-gapプロパティの値にカラム間の余白を入れます。column-gap: 15px;となるとカラム間に15pxの余白が空き、カラムの幅は自動調整されます。
【カラム同士を詰めて配置】
column-fillプロパティの値にbalanceを指定することで不揃いな高さのカラムが隙間なく詰まりpintrest風のレイアウトのように表示されます。各カラムでバランスよく均等に埋め尽くされるようになります。
【カラム内での段区切りを制限】
break-insideプロパティの値にはavoidを指定することでカラム内での段区切りを制限しグリッドレイアウトを保持します。
コンテナ要素で各カラムの数、余白、詰めて配置を指定し、グリッド要素に段区切りの制限を指定します。またグリッド要素にはinline-blockを指定します。しかし、GoogleChromeには表示バグが見られるようですのでblockの値をChromeのみ指定します。
あとはレイアウトやデザイン、またディスプレイサイズに合わせてカラムの数や余白を調整していくだけでOK！いかがでしょうか、比較的手軽に柔軟なグリッドレイアウトを作成することができました。今回の実装サンプルはこちらからご確認いただけます。
手軽にグリッドレイアウトが実装できるcolumnプロパティですが、まだベンダープレフィックスなどが必要になります。そして旧ブラウザでは使えないなどのデメリットもあります。選択肢の一つとしてflexボックスレイアウトなどと併用しながら利用してみるのがいいのではないでしょうか。
ものすごく参考になりました！！！
ありがとうございます！