みなさん、ウェブページの制作にBootstrap使っていますか。
最初から色々とclassが用意されていて便利に使えますよね。
しかし、Bootstrapは基本的にキレイに四角に並んだレイアウトをするのには向いていますが、並びに高さが違うものがあったりすると、あまりキレイに見えないのが難点です。
例えばこんな感じです。
1行だけならまだ気にならないかもしれませんが、これが数行になると、高さが低い要素の下の隙間が気になります。この高さが違う要素をうまく処理できないものでしょうか。
そうした場合にMasonryという手法があります。
高さや幅が異なる要素のものを隙間なく敷き詰めるレイアウトの方法です。jQueryを使ったJavaScriptが有名ですね。
今回はBootstrapを使いつつ、Masonryのようなグリッドレイアウトにする方法を紹介します。
スクリプト不要で、CSSを追加するだけなので、簡単に準備できる点がおすすめです。
ただ今回紹介する方法は、本格的なものではない簡易的なものなので、「幅が同じ」で高さが異なる要素を並べることに限定した使い方を想定しています。
具体的な使用例としては、TwitterやInstagramなどのSNS投稿をウェブページに埋め込むときに使います。
