CSS Grid

流行のGrid

「流行の」という言い方は不遜かもしれない。しかし、そう言いたくなるほどに Grid レイアウトはあっという間に広く浸透したように思う。自分は、Grid や FlexBox の技術の存在そのものは以前から知ってはいたものの、せっかく覚えたブロックレイアウトでなんの不自由があるのかと考えていた。今となってはこれも老化現象かと思う。

しかしどんな風の吹き回しか、昨年後半、人の勧めもあって、Grid とはどの様なものか覗いてみることにした。最も簡単でシンプルな例題で書いてみると意外に簡単に動作する。これは面白そうと、少し複雑なものに摘要してみると、それなりに行数も増えて、構造も少し複雑になってくる。やっぱりねという感じで、これは場面に応じて使うものかなと理解した。

自分は、Table も使っていて、それこそレイアウト用ではないにしても、骨組みを Table で書くと高次元のレイアウトは効率的にできてしまう。あとは CSS でブロックレイアウトを含めて仕上げればいいので、この方法は自分にとっての一つのパターンになっている。全体として HTML5 / CSS3 でもテーブルは活用できると思う。本来、テーブルの構造をしたドキュメントは Table タグを使って書くのが直感的で分かり易いと思う。

しかし、時流には逆らえないもので、「 Table は古い」という認識が広まり、ブラウザのレンダリングエンジンの Table 関連の不具合がなかなか修正されないといった状況になってきた。例えば、行を状況に応じて非表示にしたりする場合、罫線をどうするかという点で不可解な現象になる。非表示にする行と、その上下の行で、それぞれ別々にデザインされた罫線のうちどれを残すかという点で、ブラウザによって異なる結果になることがある。これは用途によっては致命的な問題で、結果、このようなケースでは Table は使えないということになってしまった。メーカーとしてもどこに投資するかは大きな問題で、私たちとしても古い技術を使い続けるリスクを考える必要があることを思い知らされた。

さて、CSS グリッドも使い続けるうちに、理解も少しずつ深まり、auto などの便利な機能の存在を知るにつけ、効率的な技術であることがわかった。何よりもシンプルでソースの行数が減る。そしてレスポンシブルなページの記述には大変効率が良く、分かり易い。冒頭の「流行」に納得の心境となった。このホームページのTOPページも Grid に書き換えたのだが 30 分もかからなかった。最近書いているページは例外なく CSS Grid を使っている。