Bootstrapを使いつつTwitterやInstagramの投稿の埋め込みをスキマなく敷き詰めるCSS

まずは普通の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>

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

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

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

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

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

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

注意点

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