【CSS Grid 実務編】よくあるレイアウト６つを実際のコードで解説｜明日から仕事で使える！

さて、【CSS Grid 入門編】の続きです。

ここからは、Web制作の現場において実際にどのようにCSS Gridを使用したら良いのかを６つの事例をもとに解説し、実務で使えるレベルに落とし込んでいきます。

CSS Gridの実務課題６つ

Web制作において、Gridを使って実装したが向いているレイアウト６選を解説します。

①左右反転

②カードレイアウト

③グリッドの端にそれぞれの要素を配置

④タイル型

⑤サイドバー+記事レイアウト

⑥コンテンツが少なくてもページ分の高さを保持する

1. デモページ
2. 課題用のファイル・解答用ファイル
3. ポイントとなるコードの解説

上記をそれぞれの課題で用意しているため、手を動かしつつ「どういった実装にCSS Gridが向いているのか」を体感しながら理解することができるようになるため、即実務に反映させることができるようになります。

※①に関してはflexの方が向いています。（具体的な解説します）

課題フォルダと取り組みの流れ

Zipファイルをダウンロードして開くと01〜06のフォルダが並び、それぞれのフォルダに

• A（解答フォルダ = デモと同じ）
• Q（練習用フォルダ）

がそれぞれ入っています。

Qの解答用のフォルダにはreset.cssやbase.cssといったGridの練習とは関係のない装飾のCSSがすでに適用されており、穴埋め形式でGridに必要な考え方のみ効率よく練習できるようになっています。

ここにコードを書いて正解のコードと同じ挙動になるかチェックしてください。

※gridに関係のないCSSの解説はありません。

全てのサンプルをデモサイトとしてサーバーへアップしています。

noteでパスワードを手に入れてください

ここから先は有料コンテンツです。noteで購入することによりパスワードを入手してください。

---

また、パスワード入力後は、コードのCSSが当たらない状態になると思うので、リロードしてもらえればOKです👍

zipファイルのダウンロード / Basic認証のログイン情報

パスワードが必要です

送信する