概要 Masonryのようにスキマなく要素を敷き詰めるグリッドレイアウトを実現するCSSをBootstrapを使いながら安全に適用できるように作ってみました。

Bootstrapをグリッドレイアウトっぽくする


みなさん、ウェブページの制作にBootstrap使っていますか。

最初から色々とclassが用意されていて便利に使えますよね。


しかし、Bootstrapは基本的にキレイに四角に並んだレイアウトをするのには向いていますが、並びに高さが違うものがあったりすると、あまりキレイに見えないのが難点です。


例えばこんな感じです。

Bootstrapで隙間が空いてしまう例


1行だけならまだ気にならないかもしれませんが、これが数行になると、高さが低い要素の下の隙間が気になります。この高さが違う要素をうまく処理できないものでしょうか。


そうした場合にMasonryという手法があります。

高さや幅が異なる要素のものを隙間なく敷き詰めるレイアウトの方法です。jQueryを使ったJavaScriptが有名ですね。


Masonry-01


今回はBootstrapを使いつつ、Masonryのようなグリッドレイアウトにする方法を紹介します。

スクリプト不要で、CSSを追加するだけなので、簡単に準備できる点がおすすめです。


ただ今回紹介する方法は、本格的なものではない簡易的なものなので、「幅が同じ」で高さが異なる要素を並べることに限定した使い方を想定しています。

具体的な使用例としては、TwitterやInstagramなどのSNS投稿をウェブページに埋め込むときに使います。

●まずは普通のBootstrap流のHTML

普通はこんな感じで書いていきますよね。

<div class="row">
    <div class="col-md-4">
        【内容1】
    </div>
    <div class="col-md-4">
        【内容2】
    </div>
    <div class="col-md-4">
        【内容3】
    </div>
</div>

ここでの例は【内容XX】の部分に並べたい内容を書きます。TwitterやInstagramなどのSNS投稿を並べたいのであれば、埋め込み用タグを書きます。

ウェブページのコンテンツ領域の幅にもよりますが、col-md-6で2列にするか、col-md-4で3列にするかといった違いはあるかもしれませんが、基本はこの構造になります。


BootstrapのCSSが適用されていれば、このままでも、特に問題はありません。

しかし、SNSの投稿それぞれの情報量(写真のありなし、コメントの量など)によって、高さが異なるので、1行目と2行目の間で、場合によってはスペースができてしまうので、ちょっと間延びした印象を受けてしまいます。



●グリッドレイアウトを実現するCSS

間延びしたイメージを与えないよう隙間を埋めるには以下のCSSを適用します。


.row.Masonry-2 {
    column-count: 2;
    column-gap: 0;
}
.row.Masonry-3 {
    column-count: 3;
    column-gap: 0;
}
.Masonry-2 .col-md-6,
.Masonry-3 .col-md-4 {
    float: none;
    width: 100%;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}
@media (max-width: 480px) {
    .row.Masonry-2,
    .row.Masonry-3 {
        column-count: 1;
    }
}


これをスタイルシートに適用後、<div class="row">の部分を変更します。

横の並びが2列の場合、つまり下の階層が<div class="col-md-6">の場合、<div class="row Masonry-2">に、横の並びが3列の場合、つまり下の階層が<div class="col-md-4">の場合、<div class="row Masonry-3">に変更します。



先ほどの例では、以下のようになります。

<div class="row Masonry-3">
    <div class="col-md-4">
        【内容1】
    </div>
    <div class="col-md-4">
        【内容2】
    </div>
    <div class="col-md-4">
        【内容3】
    </div>
</div>


最初に掲載した隙間が空いていたページのレイアウトは次のようになり、隙間がきちんと埋まっています。

Bootstrapで隙間を埋めた例


ほんの少しCSSを追加するだけなのでとても簡単ですね!

それもBootstrapのスタイルの書き方はそのまま残しているので、MasonryのCSSがもし何かしらの理由で適用されなくても、表示が崩れるわけではありません。安心して使うことができます。


なお、スマートフォンのようなデバイスでは1列になりますので安心してください。


みなさんもぜひ使ってみてくださいね!

それではよいBootstrapライフを。



●注意点

例を見てもらうと分かりますが、隙間を埋めるように要素が並ぶ関係で、HTMLに記述した順番に並ばないことがあります。時系列で並べたいときは注意が必要です。



●参考にしたページ


●こんな記事も読まれています



ブログ著者

笹川純一・jdash2000

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について


コメントをどうぞ


サイト内検索