- URL: CSS Grid Areas
- 著者: @shadeed9
いつ読むか？
- CSS のグリッドレイアウトをキャッチアップしたいとき
読書メモ
要点
grid-template-areasで領域に名前をつけ、grid-areaで配置する手法- レイアウト構造が CSS 上で視覚的にわかる
- レスポンシブ対応時、親の
grid-template-areasを書き換えるだけで子要素の変更不要
使いどころ
- ヘッダーのロゴ・ナビ・アクションをビューポートごとに再配置
- カードの画像・タイトル・本文の順序を柔軟に変更
- 同一コンポーネントで複数レイアウトバリエーションを持たせたいとき
注意点
- 領域は長方形である必要がある
- 空セルはドット (
.) で定義 - 長方形以外の複雑な配置には named grid lines を使う