2021年08月16日(月)

複雑なグリッドレイアウトにも対応できるCSSグリッドフレームワーク・「Griddle」

• 0
• 6
• 1
• 10

Griddle

See the Pen
by kachibito (@kachibito)
on CodePen.

Griddleは複雑なグリッドレイアウトにも対応できるCSSグリッドフレームワークです。CSSグリッドを簡単なclassで使いこなせるように組み込まれています。上デモでは割と複雑なレイアウトになっていますがRWD対応の為、media queriesが効いてしまっていますのでCodepenでご確認下さい。

既存のWebサイトへの導入も想定しており、classにはコンフリクトを起こさないように全て.is-或いは.has-といったプレフィクスが加えられています。グリッドを作る場合、ラッパーにis-gridクラスを加え、is-col-を接頭語に持つクラスで構成していきます。

Column

Griddleには様々なクラスが用意されており、複雑なレイアウトにも対応できるようになっています。

更に、タイポグラフィやカラー等、少しのユーティリティクラスも用意されているので通常のCSSフレームワーク...