[Bootstrap][CSS] Bootstrap v4 の Cards レイアウトを使って簡単に Masonry ライクなグリッドレイアウトを実装する

ピンタレスト風の、ボックスがレンガ状にピタッと隙間なく流れ込むレイアウトを 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 は新たな発見がつまっていますね。

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル コンテンツ スライドショー jQueryプラグイン php 引っ越し 素材 お知らせ JavaScript Facebook CSS カテゴリー 投稿タイプ IE HTML5 Shareボタン seo レスポンシブ Photoshop タクソノミー ナビゲーション カスタムメニュー Git Macアプリ サイドバー WPセキュリティ SVG iTunes PHPリファレンス API WP使い方 query_posts データベース get_posts() 条件分岐 コメント function RSS スマートフォン Sass/Compass さくらVPS