【CSSフレームワーク】FoundationのGridの使い方で参考になるページを紹介

css

CSSフレームワークFoundationとBootStrapのような他CSSと比較した時の一番の強みは、Gridの多種多様な使い方ではないでしょうか。

わたしはFoundationのGridの魅力にはまって、簡単なツールを作る時はFoundationを使うようにしています。

ただFoundationのGridって色々な表現が出来てとても魅力的なのですが、どうしても複雑なGridを作ろうとすると思い通りにならなくてアレとなったことも多々あります。。

今回はそんなGridを作るうえで、とても役立つ参考ページを紹介します。

[スポンサーリンク]

FoundationのGridの参考ページ

foundationの公式サイトのコチラのページに色々なパターンのGridが紹介されています。
やはり公式サイトが一番ですね。

foundation-grid1

FoundationのGridの参考ページの使い方

自分のイメージに近いGridのコチラのボタンをクリックして、HTMLを表示させます。

foundation-grid2

表示されたHTMLをテキストエディタに張り付けて解読すればOKです。
こちらのHTMLを参考にGridを作成していきましょう!

foundation-grid3

さいごに

先ほどのページを見てもらうとわかりますが、FoundationのGridのパターンは本当たくさんあります。

組み合わせ次第では、先ほどのページに記載されていないGripのパターンも作れると思います。

Foundationを使って複雑なGridを表現しようとすると、どうしてもコード自体も考えてコーディングする必要があります。
そんなときは今回紹介したページを参考にしてみてください!
それでは!