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

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

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

サイトのキャプチャ

Extra Strength Responsive Grids
Extra Strength Responsive Grids -GitHub

Extra Strength Responsive Gridsの特徴

  • %ベースの可変グリッド
  • デスクトップ・タブレット・スマフォなどのレスポンシブ対応
  • 各エレメントのツラ揃えも簡単
  • グリッドのネストにも対応
  • 使いやすいclass名
  • Sass対応
  • 不揃いの高さも揃えます

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で表示

top of page

©2017 coliss