CSS Grid Layout の基礎について社内勉強会で発表した
先日、社内で定期的に開催されているフロントエンジニア向けの勉強会で発表する機会があり、CSS Grid Layoutについて興味があったので、基本的な使い方などを調べて発表しました。
スライドは下記になります。
CSS Grid Layoutのもっとも優れていると感じたところ
CSS Grid Layoutは、複雑なレイアウトが簡単に実現できるというのが大きな特徴ではありますが、実は一番すごいと感じたのは、HTML（構造）とCSS（見た目）を分離できるという点です。
もともとCSSが生まれた背景には、構造と見た目を分離するという目的があったのですが、なんだかんだでレイアウト用のdivを入れなければならなかったり、要素の順番を本来の順番にはできなかったことが多々ありました。
しかし今回、簡単ながらサンプルを作ってみて、そういったレイアウトのためにHTMLを何かしたということはありませんでした。ついにこのような形が実現できるようになったのかと感動しました。
下記がそのデモになります。良かったらHTMLコードを見てみてください。
とてもシンプルな構造というのが分かるかと思います。
CSS Grid Layout Demo
ブラウザの対応も進んできて、実際に案件で使える日もそう遠くないと思います。
個人プロジェクトなどでは積極的に使っていき使いこなせるようになっていきたいと思います。
