動的グリッドレイアウトのためのシンプルで軽量なJavascriptライブラリ「Magic Grid」

動的コンテンツって、文字数など内容量が一定でないためにコンテンツ高がバラバラになることがほとんどだと思います。厳密に文字数制限していれば別ですが、それが難しいケースも多分にあります。これをグリッド状にレイアウトすると、隙間が出来て見栄えが悪くなってしまったり、見た目を整えるために余白を設けたりする場合もあるんじゃないでしょうか。

あぁ……、高さがバラバラな要素を、レンガのように隙間なく敷き詰めたい。そんなときに便利なJavaScriptライブラリがあったので備忘をかねての投稿です。しかも超軽量！　そしてVue.jsでも利用できるとのことです。

Magic Grid

Magic Grid デモページ（JSFiddle）

もちろんレスポンシブなのでブラウザ幅によってカラム数が変わっていきます。スルンと組み変わるのがイイですね。