レスポンシブなグリッドだけを提供する軽量スタイルシート「fitgrid」
fitgridは本番環境下でも耐えられる軽量なレスポンシブグリッドなスタイルシートです。
レスポンシブなWebデザインを実現するのは大変ですが、Bootstrapを使うとそれっぽさが残ってしまう…。そんなジレンマを感じている方はfitgridを試しましょう。fitgridは軽量なグリッドレイアウトを提供します。
[](http://images.moongift.jp/2013/05/Screenshot 2013-05-15 10.15.07.1368593934.png)
デスクトップサイズでの表示。
[](http://images.moongift.jp/2013/05/Screenshot 2013-05-15 10.15.16.1368593939.png)
1〜4列で細かく制御できます。
[](http://images.moongift.jp/2013/05/Screenshot 2013-05-15 10.15.38.1368593943.png)
タブレットサイズ。幅が狭くなっても奇麗に表示されます。
[](http://images.moongift.jp/2013/05/Screenshot 2013-05-15 10.15.42.1368593949.png)
画像もグリッドに沿っています。
[](http://images.moongift.jp/2013/05/Screenshot 2013-05-15 10.15.49.1368593957.png)
幅を狭くすると画像の並びも変わります。
[](http://images.moongift.jp/2013/05/Screenshot 2013-05-15 10.15.53.1368593961.png)
一番狭くした場合。整然と並んで表示されます。
fitgridは横幅を12に分割してグリッド化します。.fg3といったクラスを使えば4つ並べられる計算です。12を一つ、4を3つといった具合に組み合わせて利用できます。fitgridは軽量であり、本番環境下でも使えるように余計なことはしないように設計されているとのことです。
fitgridはスタイルシート製のオープンソース・ソフトウェア（MIT License）です。
MOONGIFTはこう見る
Bootstrapは便利なフレームワークですが、それっぽさが残ってしまうので嫌がるケースもあります。より本格的なWebサービスを作る上でそう感じることが多いです。またデザイン上の自由度も下がる傾向があり、作法から外れると一気にデザインバランスを保つのが困難になったりします。
しかし同時にレスポンシブWebデザインを適切に行うのもまた難しい技術です。fitgridはまさにそのレスポンシブなグリッドデザインを行うノウハウをソフトウェアにしたと言えるでしょう。そのまま使っても良いですし、ソースを見ることで得られるテクニックもありそうです。