更新日
10|CSS Gridとflexを使い分けをマスターしよう
今までレイアウトは全てdisplay: flex
を使用してきましたが、今後どんどん活用されていくであろうCSS Gridを使用したレイアウトもマスターしていきましょう。
Gridの学習の流れ
GridはCSSの中でもレベルの高い知識の1つです。実はプロのコーダーさんでもGridを使いこなせる人はそこまで多くありません。(逆に言えばGridが使えなくても仕事としては成り立ちます)
順を追って身につけていく必要があるので、以下の流れで取り組んでいきましょう。
- こちらの「CSS Grid 入門編」で基礎を身につける
- 学んだ知識を元にこの講座で実務レベルの実装を身につける
- 最後に「FlexboxとCSS Gridの違い」をおさらいする
基礎を終えたら実務に落とし込んでいこう
今回は以下の6つの例を元に実務レベルで扱えるように基礎を昇華させていきます👍