2022年02月16日(水)

CSS Gridの勉強会を開催しました

• 0
• 1
• 1
• 3

業務委託先の会社でCSS Gridの社内勉強会を開催したので使用した資料を公開します。

細部は発表しながら補足する前提で作成した資料のため、スライドだけでは情報が十分でない部分もありますが、概要は掴めるのではと思います。

また、スライド内で使用しているコードはこちらで確認できます。
コード一式はこちらからダウンロードできます。

資料やサンプルコードは学習や勉強会目的で自由に使用していただいて構いません。
また、誤りなどありましたらご指摘いただけると嬉しいです。

CSS Gridの資料を作成していて学んだこと

私自身CSS Gridを熟知していた訳ではなく、学んでいる段階でした。そこで、自分の学びを共有する形にしたら学びも深くなるし、他のメンバーのスキルアップにも貢献できると思い勉強会を開催しました。

資料作成の前はCSS Gridの基本的なことを把握している程度だったのですが、資料作成を通して新しい学びや発見が多々ありました。

特に学びの多かった点を下記に挙げます。

アイテムを行(列)全体に配置指定

アイテムの配置指定を、grid-column: 1 / -1 や ...