bokunonikki.net
JP / EN

CSS Gridでレスポンシブ

Sun Jul 7, 2019
Sun Jul 7, 2019

よくある基本レイアウトを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フレームワークとか使いたくないと思ってしまいます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
@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;
    }
}
Tags
CSS
See Also