memocarilog

ピンタレスト風の、ボックスがレンガ状にピタッと隙間なく流れ込むレイアウトを Bootstrap を使うと簡単にできることを発見したのでご紹介します！JS ライブラリを使用することも自分で CSS を書くこともなく実装できます。

実装サンプル

以下実装サンプルです。

See the Pen Bootstrap v4 の Cards レイアウトを使った簡単 Masonry ライクなグリッドレイアウト by Saomocari (@Saomocari) on CodePen.

実装方法

Bootstrap がサイト側に読み込まれていることが前提となります。Bootstrap の公式サイトから Bootstrap をダウンロードして head タグで CSS を読み込みましょう。お手軽に試したい場合は Quick start の CSS のところにある CDN リンクをサイトの head タグに貼るのが簡単です。

グリッドレイアウトを実装したい部分を div タグで囲み　card-columns をいうクラスを付与します。

<div class="card-columns">
    ここに子となるボックスが入ります。
</div>

グリッド状にならぶ子となるボックスへ card クラスを付与し .card-columns へ挿入します。

<div class="card-columns">
<div class="card">
　　<div class="card-body">
    子のボックス
　　</div>
</div>
<div class="card">
　　<div class="card-body">
    子のボックス
　　</div>
</div>
<div class="card">
　　<div class="card-body">
    子のボックス
　　</div>
</div>
<div class="card">
　　<div class="card-body">
    子のボックス
　　</div>
</div>
<div class="card">
　　<div class="card-body">
    子のボックス
　　</div>
</div>
</div>

これだけで実装完了です！親と子のボックスへクラス付けするだけです。とっても簡単ですね。

Bootstrap 側ではどんな CSS が書かれているか

このような Masonry 風のグリッドレイアウトが Bootstrap でどのように実装されているのか .card-columns と .card の CSS を確認してみました。書かれている CSS は以下のようになっています。

スマホでは縦並びのレイアウトへ変更されるためメディアクエリの指定 @media (min-width: 576px) が入っています。

@media (min-width: 576px){
  .card-columns {
    -webkit-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 1.25rem;
    column-gap: 1.25rem;
    orphans: 1;
    widows: 1;
  }

  .card-columns .card {
    display: inline-block;
    width: 100%;
  }
}

column-count プロパティを使用して、段組みを作っているだけのシンプルな仕組みでした。column-gap ではカラムのスペースを調整しています。

子となる .card には display: inline-block; の指定のみです。ちなみに orphans と widows は印刷時の改ページ用の指定です。

column-count プロパティはブラウザ対応状況もよく、IE10以上とその他のブラウザでも使用可能です。

column-count を使用するとこんなに簡単にグリッドレイアウトが実現できると知らず、column-count プロパティについてももっと詳しく見てみようと思いました。Bootstrap の CSS は新たな発見がつまっていますね。