レイアウト & グリッド

レイアウト & グリッドに分類されるWeb表現技法9件。CSS Grid マガジンレイアウト、Flexbox ホーリーグレイル、CSS-only Masonry風グリッド、Subgrid カード整列など。ライブデモとコピーできるコード付き。

grid-template-areas で名前付きエリアを定義し、雑誌の誌面のようにヒーロー・索引・ヘッダーを組む。複雑な誌面構成を宣言的に表現できる。

ヘッダー・フッターと固定幅の両サイド＋伸縮する中央カラムを Flexbox で構成する定番の3カラム管理画面レイアウト。

column-count と break-inside: avoid だけで、高さの異なるタイルを石積み状に並べる Masonry 風ギャラリー。JSのライブラリ不要。

grid-template-rows: subgrid で各カードが親グリッドの行ラインを継承し、本文の長さが違っても見出し・価格・ボタンの高さがピタリと揃う料金表。

container-type と @container で、置かれたコンテナの幅に応じて同じカードが縦積み↔横並びへ切り替わる。スライダーで挙動を体感できる。

aspect-ratio をCSS変数で制御し、1:1/4:3/16:9などの比率を保ったままタイルを敷き詰める画像ギャラリー。比率切替も滑らかに。

column-width・column-rule・column-span で新聞風の段組み本文を組む。ドロップキャップや見出しの段ぶち抜きも実演。

grid-column / grid-row の span で大小のタイルを組み合わせる、近年流行のベント風ダッシュボードレイアウト。クリックで発光パルス。

position: sticky と top のずらしで、スクロールするとカードが重なり積み上がるストーリーテリング向けレイアウト。進捗バーをJSで連動。