レスポンシブWebデザインが広く一般的になっていく中でグリッドデザインもまた多用されるようになっています。グリッドデザインにすることでデバイスの画面幅に応じた情報が表示しやすくなっています。 そうした中で紹介したいのがMuuriです。ソートやフィルタリングをサポートしたグリッドレイアウトライブラリです。

Muuriの使い方

インクリメンタルな文字列でのフィルタリングです。

ドラッグ&ドロップでの移動もサポートしています。

色やタイトルといった属性情報での並び替え。

数字の並び替え（左右上下を開始点に変更できます）。

カンバンのようにドラッグ&ドロップで移動するデモ。

Muuriはもちろんレスポンシブに対応しています。整然と並んでいる情報をフィルタリングしたり、並び替えするような機能をつけたい時にぴったりです。

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

Muuri - Responsive, sortable, filterable and draggable grid layouts haltu/muuri: Responsive, sortable, filterable and draggable grid layouts