2021年08月16日(月)
複雑なグリッドレイアウトにも対応できるCSSグリッドフレームワーク・「Griddle」
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-を接頭語に持つクラスで構成していきます。
ColumnGriddleには様々なクラスが用意されており、複雑なレイアウトにも対応できるようになっています。
更に、タイポグラフィやカラー等、少しのユーティリティクラスも用意されているので通常のCSSフレームワーク...
0
6
1
10author:
かちびと.net
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログ
Ads
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『複雑なグリッドレイアウトにも対応できるCSSグリッドフレームワーク・「Griddle」』についてまとめています。
気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
