2019年01月16日(水)

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

• 0
• 218
• 164
• 211

カードの高さが常に一定であれば、CSS GridやFlexboxで簡単に実装できます。しかし、ユーザーが作成したデータを使った動的コンテンツでは高さが同じになることはほとんどありません。

カードの高さがそれぞれ異なる動的グリッドを簡単に実装できる超軽量JavaScriptライブラリを紹介します。
動的コンテンツはもちろん、静的コンテンツにも対応しています。

Magic Grid
Magic Grid -GitHub

Magic Gridの特徴

Magic Gridは、高さが異なるアイテムでもグリッドに揃えてレイアウトすることができます。高さを調整するために、下部に異なるスペースは必要ありません。

高さが揃っていたり、たくさんの行にそれぞれが何行にまたがっているか定義できる場合はCSS GridやFlexboxで簡単に実装できますが、完全に高さが異なるアイテ...