display:gridを使う

display:gridはあまり使ったことが無かったのですが、改めて使ってみたら楽しかった。
痒いところに手がとどいでいい感じですね。個人的にflexより好き。
複雑なレイアウトやテーブルを簡単に表現できそう。

See the Pen 171031 by M.Ueda (@nekuta) on CodePen.

grid-template-columnsは横、grid-template-rowsは縦のカラムを設定していきます。
縦3つ、横3つ指定したので、9つのカラムに分かれました。

エリアの指定

grid-template-areasでエリアに名前をつけられます。
また、grid-areaでエリアを指定できます。.boxAにはエリア名boxAが対応するとになります。

ブラウザ対応

ほとんどのブラウザで対応していますが、残念ながらIEやedgeだと崩れます・・・
プレフィックスつければ大丈夫らしいですが、いまいちいい動きをしません。
クロスブラウザは難しいかなー

  • コーダーのための計算機