レスポンシブ対応で柔軟性に富んだグリッドを使いたいならこのフレームワーク -Extra Strength Responsive Grids

Post on:2013年2月5日

sponsors

デスクトップ・タブレット・スマートフォンなど、レスポンシブ対応で柔軟性に富んだ可変グリッドのレイアウトをつくるのに便利なフレームワークを紹介します。

各エレメントのツラや高さの異なるパネルも簡単に揃えることができます。

Extra Strength Responsive Gridsの特徴

デモは上部から、表示サイズを変更して紹介します。
まずはレイアウトのベースとなるグリッドで、デスクトップで3, 4カラムのものが表示サイズにより最適なサイズに変更されます。
サイドバーに垂直に配置されたエレメントは、サイズが小さくなると水平配置になります。

デモ：レイアウトとサイドバー：1200pxで表示

デモ：レイアウト：左780px、右480pxで表示

デモ：サイドバー：左780px、右480pxで表示

12カラムに区切られたグリッドで設計されており、12は2, 3, 4, 6で割り切れる数字なので汎用性があります。

デモ：グリッドの設計：1200pxで表示

paddingを使った揃えとネストのデモです。

デモ：揃えとネスト：1200pxで表示

デモ：揃えとネスト：左780px、右480pxで表示

最後は高さが異なるパネルの高さを揃えます。
上が不揃い、下が揃えです。

デモ：高さを揃える：1200pxで表示

デモ：高さを揃える：左780px、右480pxで表示