CSS Gridでレスポンシブ

よくある基本レイアウトをCSS Gridで作ってみました。

こんなやつ。

See the Pen css grid by WooStreet (@woostreet) on CodePen.





一番のキモは2カラムの可変。

メディアクエリーを使って、600px以上だとgrid-template-columnsが2fr 1frとなっていたところを、1frのみに変更するだけで1カラムとして表現できます。headerfooterのようにどのサイズでも1カラムの場合は、そのままで、2カラムから1カラムに変更したいなどの場合は、おおもとのクラスでくくるだけで、簡単にレスポンシブで表示されます。

これだけでも結構感激もの。もうcssフレームワークとか使いたくないと思ってしまいます。

@media screen and (min-width:600px){
    /*600px以上で適用する内容*/
    .grid {
        display: grid;
        gap: 10px;
        grid-template-columns: 2fr 1fr;
    }
}

@media(max-width: 400px){
    .grid {
        grid-template-columns: 1fr;
    }
}





See Also