owned mediaウェブ制作に役立つコンテンツを発信中!

CSSのみで実装するPinterest風グリッドレイアウトを作成する

最終更新日: Update!!
今回は、写真共有に特化した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ボックスレイアウトなどと併用しながら利用してみるのがいいのではないでしょうか。
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

comments

  • たけのこ

    2018.3.18
    ご丁寧に分かりやすくありがとうございます。 教えて頂いた事調べてみます。 ありがとうございました。
  • オガワ シンヤ

    2018.3.16
    コメントありがとうございます。 こちらの記事で紹介しているマルチカラムのレイアウトですが、その名の通りカラム(列つまり縦方向のボックス)を定義してレイアウトを行うというものです。 したがって縦方向のボックスの数を先に決めるので、横に折り返すとなりますと別のアプローチで行うことになるかと思います。 flexboxやインラインでのレイアウトが一般的かと思いますが、最近ではGrid Layoutというのもありますので、イメージに近く使いやすいものを採用するのがいいのではないでしょうか。
  • たけのこ

    2018.3.14
    グリッドを縦に折り返しではなく、横で折り返す方法があればご教授いただきたいです。
  • オガワ シンヤ

    2018.2.14
    コメントありがとうございます。 今後もデザインやウェブに関する情報を発信していきますので、 これからも当サイトのコンテンツも見ていただけると嬉しいです。
  • なまけもの大学生

    2018.2.13
    ものすごく参考になりました!!! ありがとうございます!

sponserd

    keyword search

    recent posts

    • Twitter
    • Github
    contact usscroll to top
      • Facebook
      • Twitter
      • Github
      • Instagram