Vue.jsにも対応の優れ物！高さが異なるカードでもグリッドにレイアウトできる超軽量ライブラリ -Magic Grid

カードの高さが常に一定であれば、CSS GridやFlexboxで簡単に実装できます。しかし、ユーザーが作成したデータを使った動的コンテンツでは高さが同じになることはほとんどありません。 カードの高さがそれぞれ異なる動的グリッドを簡単に実装できる超軽量JavaScriptライブラリを紹介します。 動的コンテンツはもちろん、静的コンテンツにも対応しています。 Magic Grid Magic Grid -GitHub Magic Gridの特徴 Magic Gridのデモ Magic Gridの使い方 Magic Gridの特徴 Magic Gridは、高さが異なるアイテムでもグリッドに揃えてレイアウトすることができます。高さを調整するために、下部に異なるスペースは必要ありません。 高さが揃っていたり、たくさんの行にそれぞれが何行にまたがっているか定義できる場合はCSS GridやFlexb

[coliss]

動的グリッドを簡単に実装できる超軽量JavaScriptライブラリ

[otoan52]

CSS gridはサイトのカラム構造とかを定義する用だから、サイズ不定のものを綺麗に並べる機能はないのよ。その用途だとflexレイアウトの方が近いけど、望む機能には足りないのよね。

[sisicom]

これは積極的に使ってみたい

[og24715]

react-masonry-css はもうすこし知られてもいい

[knakamura1977]

使うかも。

[hachibeechan]

グリッドライブラリみるたびにおもうんだけど、普通にCSS grid使うだけじゃだめなの？

[ktoktokto]

あとで

[clash_m45]

今おれが欲しいライブラリかもしれん。高さだけかな？幅もいい感じになるとうれしい