CSSグリッドでより良い実装ができたこと - Progate Tech Blog

こんにちは、ProgateのChandyです。 本記事はProgate Advent Calendar 2020の11日目の記事です。 現在はソフトウェアエンジニアですが、元々はデザインの経験もあり、UIの実装が好きなので、CSSが特に興味があります。 一年前くらい前にCSSのグリッドを初めて使用して、どんどん書いていくうちにいろいろな部分で実装が良くなっていったと思います。 グリッドを使って特に良かった所について書きたいと思います。 ２次元レイアウトの実装がシンプルになる グリッドは2次元レイアウトなのでちょっと当たり前のことかもしれませんが、そういうレイアウトの実装方法が結構改善できて感動したので共有したいです。 例はいくつありますが、一番最近に実装したのは以下のようなレイアウトがあるフォームです。 通常はラベルと入力欄を<div>で行にまとめて、以下のようにスタイルできると思います。