場所に名前を付ける
grid-template-areas で行ごとの配置を指定し、各要素の grid-area と対応させます。
CSS GRID LAYOUT · 099
CSS Grid Template Areas Builder
ページの領域を配置して、PCとスマホの並びを作る。
01GRID AREAS
LIVE LAYOUT BUILDER
4つの領域でページを組む
layout.local / page-gridLIVE PREVIEW
RESPONSIVE PAGE
領域とフッターの位置を見る
プレビューは独立した画面です。「短い」と「最低1画面」を切り替えると、フッターが画面下に移る様子を確認できます。
02
HOW IT WORKS
配置と高さをCSSで決める
幅に合わせて並べ直す
スマホ幅では1列の grid-template-areas に変更します。HTMLの要素は移動しません。
短いページを1画面に
min-block-size: 100svh と本文行の 1fr で、短いときはフッターを下へ、長いときはページを伸ばします。
見た目だけの並び替えは、読み上げやキーボードの順序を変えません。重要な内容ではHTMLの順序も確認してください。