ITエンジニア/デザイナ向けにオープンソースを毎日紹介

コンテンツを綺麗に並べる際に必要なのがグリッドです。さらにレスポンシブに対応しようと思うとJavaScriptライブラリが欲しくなるでしょう。グリッドと一言でいっても奥が深い技術です。

今回はそんなグリッドを手軽に導入できるEasyGridを紹介します。

EasyGridの使い方

基本的な同じ高さのコンテンツを並べる例。

フィルタリング。こちらはフィルタリング前。

フィルタリング。異なる色でもグルーピングできます。

縦の長さが異なるコンテンツを並べる例。

BootstrapのCardを利用する例。

同じくBootstrapのPostを使うこともできます。

ムービーリストと名付けられたリスト表示。

EasyGridのいいところは外部ライブラリへの依存がないことでしょう。VanillaJSでの実装なので、任意のフレームワークと組み合わせて使えます。この手のライブラリはjQueryを使うことが多いので、EasyGridのように依存がないライブラリは貴重です。

EasyGridはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

EasyGrid - Demo

BMSVieira/EasyGrid: EasyGrid - VanillaJS Responsive Grid

 

MOONGIFTの関連記事

  • DevRel
  • Com2