Masonryを使ってタイル表示

2021-05-28
masonry

Bootstrap4ではCardをタイル表示できたのですが、5ではその機能が除外されてmansonryを使うように推奨されています。色々な副作用があったとのことで・・5では除外されているようです。

#Mansory

Mansoryのサービスページはこちら https://masonry.desandro.com/

MansoryのGithubはこちら https://github.com/desandro/masonry

Bootstrapを使った例はこちら https://getbootstrap.com/docs/5.0/examples/masonry/

CDN

ダウロードしてもよし、NPMでパッケージを管理してもよしですが、一番簡単なのはCDNのリンクを貼り付けて利用することができます。

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>

初期化

今回はJQueryを使って初期化

$('.grid').masonry({
  // options...
  itemSelector: '.grid-item',
  columnWidth: 200
});

Htmlは下記

<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  ...
</div>

こちらが実装済みの画面になります。

Masonryの例

公開日: 2021-05-27