こんにちは、ProgateのChandyです。
本記事はProgate Advent Calendar 2020の11日目の記事です。
現在はソフトウェアエンジニアですが、元々はデザインの経験もあり、UIの実装が好きなので、CSSが特に興味があります。 一年前くらい前にCSSのグリッドを初めて使用して、どんどん書いていくうちにいろいろな部分で実装が良くなっていったと思います。
グリッドを使って特に良かった所について書きたいと思います。
２次元レイアウトの実装がシンプルになる
グリッドは2次元レイアウトなのでちょっと当たり前のことかもしれませんが、そういうレイアウトの実装方法が結構改善できて感動したので共有したいです。
例はいくつありますが、一番最近に実装したのは以下のようなレイアウトがあるフォームです。
通常はラベルと入力欄を<div>で行にまとめて、以下のようにスタイルできると思います。
See the Pen Form Fields w/ Flexbox by chandler (@chandlerazling) on CodePen.
これは崩れやすい所もなく、特に悪くないと思います。
ただ、すべての要素は何かスタイルが必要でmarginを指定する場所が複数あることを考えたらやや複雑ではないでしょうか。
それで、グリッドを使ったら以下のようにできます。
See the Pen Form Fields w/ Grid by chandler (@chandlerazling) on CodePen.
コードがかなり簡潔にまとまったと思います。スタイル指定が半分の量になってスタイルされる要素が一つだけになりました。HTMLの方もラベルと入力欄のまとめる<div>が要らなくてシンプルになりました。
minmaxやfr周りにはちょっと勉強が必要でしたがやり甲斐があったと思います。
１次元レイアウトにも良い
１次元レイアウトならflexbox、２次元レイアウトならグリッドを使うとよく言われていますが、１次元レイアウトにもグリッドが最適な場合があると思います。
例えば、複数並んだ要素の間にだけマージンをとりたい場合、flexboxを使って表現するのは少し面倒だと思います。
See the Pen Horizontal Layout w/ Flexbox by chandler (@chandlerazling) on CodePen.
要素の間だけにマージンをつけるために最後の要素の余白をリセットしなくてはいけないですね。
でもグリッドはgapプロパティで簡単に指定できます。
See the Pen Horizontal Layout w/ Grid by chandler (@chandlerazling) on CodePen.
ちなみにflexboxもgapがありますが、まだ未対応のブラウザーがあります。対応されたらその方がいいかもしれませんが、とりあえずグリッドがいいと思います。
レスポンシブなレイアウトが自由に変更できる
一番すごいと思ったのは以下のようなレスポンシブ対応のレイアウトを実装した時です。
画面サイズによって要素の順番がちょっと変わります。PC版は画像が最初に表示されますが、スマホ版は画像がタイトルとテキストの間になります。
floatやflexboxのorderでなんとかできるかもしれませんが、かなり複雑になってしまうと思います。それか画像を２つ、PC版用とスマホ版用、作成するかと思います
ですが、グリッドなら以下のように実装できます。
See the Pen Responsive Layout w/ Grid by chandler (@chandlerazling) on CodePen.
スマホ版のスタイルはあまり変更しなくて済みます。grid-template-areasとgrid-areaのおかげです。
親要素にgrid-template-areasで'image'、'title'、'heading'というgrid-areaを定義して組み合わせします。命名は自由に決められます。
PC版は１行２列でimageが１列目いっぱいでデザイン図のように幅半分くらいになります。２列目は、titleが１行目でtextが２行目になります。 スマホ版は３行１列でimage, title, textごとは行一つになります。
これでレスポンシブ対応のための要素の組み合わせが簡単に調整できます。
まとめ
まだ慣れが必要ですが、グリッドを試したことで色々なことがわかり、実装もかなり改善できたので良かったです。
これからもグリッドを勉強していきながら楽しんでコードを書いていきたいと思います。
皆さんもぜひグリッドに挑戦してみてください！
Progate Advent Calendar次の記事はktsutsumiさんです。お楽しみに！
