【CSSグリッド】CSS Grid Layout時代に合わせてmixinを作ってみる

【CSSグリッド】CSS Grid Layout時代に合わせてmixinを作ってみる

2017年3月にモダンブラウザで一斉に対応されるようになった、CSS Grid Layout。
現在、実験&勉強中です。

学んでいる過程でどうもIEやEdgeでの挙動が怪しいことがわかり、何とかならないものかと対応の仕方を考えていました。そうしたら、ちょうどいいまとめがQiitaにあったので紹介。

参考:CSS Grid Layoutをガッツリ使った所感(Qiita)

正直なところ、参考記事をそのまま使えば問題ないのですが、せっかくなので参考記事をもとに自分でもSCSSのmixinを作ってみることにしました。グリッドの数を最大列4×行4で想定してgrid-templateのmixinを作ったので、それ以上に大きくなるときはカスタマイズする必要あります。

なお、これはレイアウトテストのために作ったmixinなので、今後試していく中で変わっていくこともあることを、始めにお伝えしておきます。

27 views/total