よくある基本レイアウトをCSS Gridで作ってみました。
こんなやつ。
See the Pen css grid by WooStreet (@woostreet) on CodePen.
一番のキモは2カラムの可変。
メディアクエリーを使って、600px以上だとgrid-template-columns
が2fr 1frとなっていたところを、1frのみに変更するだけで1カラムとして表現できます。header
やfooter
のようにどのサイズでも1カラムの場合は、そのままで、2カラムから1カラムに変更したいなどの場合は、おおもとのクラスでくくるだけで、簡単にレスポンシブで表示されます。
これだけでも結構感激もの。もうcssフレームワーク
とか使いたくないと思ってしまいます。
|
|