ブロック要素を自動整列させるときの定番「Masonry」、Bootstrap4でも部分的につかうことはあったのですがBootstrap4を「カード」を「Masonry」で制御する方法を解説しているサイトがありましたので参考にページを作ってみました。

参考サイト Bootstrap4のCardsとMasonry.jsの相性が最強だった件

JSの読み込み(CDN)

まずはブートストラップのページに「Masonry」を読み込みます

そこに実行コードを追加

サイトでは2種類のコードが解説されていますが動作遅延処理の入った上記コードがおすすめです。

</body>の前のコードはこんな感じ。

HTMLの違い

通常のカードの基本

「Masonry」組み込みの基本

サンプル

比較サンプルを作成してみました。

サンプル

次ページに比較サンプルのHTMLあります。

1 2
スポンサーリンク