こんにちはこんにちは。
訳あって CSS のグリッドレイアウト*1で遊んでいます。
お恥ずかしい話、つい最近まで僕は「レイアウトなんて FlexBox で十分だ」などと考えていましたが、グリッドは後発の規格だけあって中〻どうして便利なことに気付いてしまいました。
そんなわけで、今日はグリッドの素晴らしさについてお話しつつ、ついでに適当に試作したサンプルも晒していきたいと思います。
導入: グリッドはどんなときに使うの?
グリッドは決して特別な道具というわけではなく、ごくオーソドックスなフォームを組むときにも地味に重宝します。
例題) 以下のレイアウト要件を満たすフォームを考えてみましょう。
一見簡単そうですが、へたくそな人(※ 僕のことです)が作ると、ラベルと入力コンポーネントの位置が揃わずガタガタになってしまったり、ラベルの文字列が見切れていたり、余白のバランスが不自然だったり、とにかく見た目が残念な出来栄えになりがちです。
また、ラベルの幅を適当に 200px
とか 10rem
みたいに決め打ちしてしまうと、あとからラベルの文字列を変更するたびにレイアウトの微調整が必要になるかも知れません*2。
グリッドを使うと、この辺の問題がなんとかなるようになります(※ 語彙力)。
続きを読む