CSSのみで実装するPinterest風グリッドレイアウトを作成する
最終更新日: Update!!
今回は、写真共有に特化したSNSでおなじみのPinterestのようなグリッドレイアウトをCSSのみで再現してみたいと思います。このグリッドレイアウトはブログサイトやキュレーションサイトでもよく見かけますので使用機会も多いのではないでしょうか。
どんなグリッドレイアウト?
Pinterestで採用されているグリッドレイアウトは次のような特徴があります。- ・レスポンシブデザインである
- ・マルチカラム(複数列)で列の数がスクリーンサイズの幅で変動する
- ・列ごとに各グリッドの高さが揃っていなくても上に詰めて表示される
グリッドレイアウトを実装する
では早速コーディングで実装していきたいと思います。結構シンプルなコードで実装することができます。下記にまとめていますのでご確認ください。 【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プロパティ
それでは実際にプロパティを詳しく見ていきます。主なプロパティは下記になります。- ・レスポンシブデザインである
- ・マルチカラム(複数列)で列の数がスクリーンサイズの幅で変動する
- ・列ごとに各グリッドの高さが揃っていなくても上に詰めて表示される
sponserd
keyword search
categories
recent posts
- Figmaで柔らかな印象のメッシュグラデーションを作成する
Figmaで柔らかな印象のメッシュグラデーションを作成する
- Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
- Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
- デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
- 【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
- 安さやチープな印象を強調させるデザインを考えてみる
安さやチープな印象を強調させるデザインを考えてみる
- メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
- 【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
comments
たけのこ
オガワ シンヤ
たけのこ
オガワ シンヤ
なまけもの大学生