Webページをレスポンシブに対応させようと思うとグリッドベースのデザインを採用することが多いでしょう。デバイスの幅に応じて並べるグリッドの数を増減させることで表示をカスタマイズできます。多くのUIフレームワークがグリッドに沿ったUIを提供しています。 今回紹介するMagic-Gridはグリッドだけを提供するライブラリです。幅に応じてコンテンツを自在に変更してくれます。

Magic-Gridの使い方

実際に試しているところです。ウィンドウ幅を変更すると表示されるグリッドの並びが変わっているのが分かるでしょう。

Magic-GridはPinterest風な表示だけでなく、縦の長さが異なるコンテンツを並べて表示するのに向いています。一つ一つのブロック幅は変わらないのがいいでしょう。コンテンツの順番は維持されるので、左から右、そして下に見ていくようなコンテンツに最適です。

Magic-GridはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

e-oj/Magic-Grid: A simple, lightweight Javascript library for dynamic grid layouts.