エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
【JavaScript】超軽量でカード型レイアウトを実装できる[Magic Grid]の使い方
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
【JavaScript】超軽量でカード型レイアウトを実装できる[Magic Grid]の使い方
今日こちらで紹介するJavaScriptのプラグイン[Magic Grid]は、高さの異なる複数のカード型レイアウト... 今日こちらで紹介するJavaScriptのプラグイン[Magic Grid]は、高さの異なる複数のカード型レイアウトを実装する際に役立つライブラリです。 高さが揃っている複数のカードを配置するのであれば CSS Grid や Flexbox で簡単に実装できますが、高さが異なるカードをレンガ状に綺麗に配置するとなると、どうしてもjQuery等のライブラリに頼らざるを得ません。 この手のライブラリの有名どころは[jQuery Masonry]ですが、[Magic Grid]は同じように簡単に実装できる点が大きな魅力です。 [Magic Grid]の挙動のサンプル [Magic Grid]を実際に試しているGif画像です。 ウィンドウ幅を変更すると、配置されたカード型の要素が移動して再配置されます。 スムーズで気持ちいい動作ですね。 GitHub : Magic Grid JavaScript