メモ:CSS Grid Layoutの書き方を(2019年5月になってやっと)学んでみる

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>

方法A(ラインの番号で指定する書き方)

See the Pen CSS Grid Layout 書き方1(ラインの番号で指定する) by Kentan (@herrkf) on CodePen.

上記のソースコードの簡単な仕組みです。

方法B(エリアに名前を付けて指定する書き方)

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

0