2017年あたりからノウハウの紹介記事が増えてきた、Webサイトの新しいレイアウト手法「CSS Grid Layout」。
今まで「まだ一部のブラウザの対応が怪しいし・・・」という理由でタッチしてこなかった領域でしたが、2019年春になって久しぶりに対応状況を確認した結果、Edgeも対応している事が判明。
「そっか、じゃそろそろ勉強してみるか」ということで、重い腰を上げて、CSS Grid Layoutの書き方について調べてみました。
※以下、いろいろ調べた結果を大雑把にまとめたものです。自分用にまとめたメモなので、あまり参考にはならないと思います。
今回 CSS Grid Layout で組んでみるレイアウト
大まかに分けて、2通りの書き方がある
それぞれの書き方で、さらに「普通に書いた場合」と「省略して書いた場合」があるようですが、ここでは、よりシンプルに記述が出来る後者をメインに書いてみました。
CSS Grid Layoutを反映するHTML
<!-- 以下のHTMLに、2種類の方法でCSS Grid Layoutを反映してみます -->
<section class="container">
<div class="itemA">A</div>
<div class="itemB">B</div>
<div class="itemC">C</div>
</section>方法Ａ（ラインの番号で指定する書き方）
See the Pen CSS Grid Layout 書き方1（ラインの番号で指定する） by Kentan (@herrkf) on CodePen.
方法Ｂ（エリアに名前を付けて指定する書き方）
See the Pen CSS Grid Layout 書き方2 by Kentan (@herrkf) on CodePen.
CSS Gridならではのレイアウト例
学んだばかりの知識ですが、こんなのを作ってみました。こういうのは、floatやflexboxでは再現が困難なのではと思います。
ちなみに、方法Aと方法Bのどちらがいいかについて。最終的には「好み」に行き着くのではと思いますが、今のところ個人的には「方法B」のほうが直感的に感じられて好みです。
See the Pen CSS Grid Layout習作190514 by Kentan (@herrkf) on CodePen.
2019/05/16追記：IE11に対応させた版
IE11はプレフィックスという特殊な書き方を行わないとCSS Gridレイアウトを表示できないため、Autoprefixer CSS online を使って、プレフィックスを付け足してみました。
See the Pen CSS Grid Layout習作190516_IE11対応 by Kentan (@herrkf) on CodePen.
CSS Grid Layoutについて、参考にしたページ
2019年までに見直しておきたいCSS・JavaScriptの手法 – Speaker Deck
CSS Grid Layoutをガッツリ使った所感 – ICS MEDIA
今度こそわかった! CSSグリッドレイアウトの作り方と基本知識
CSS Grid Layout を極める！（基礎編） – Qiita
