レイアウト & グリッド
レイアウト & グリッドに分類されるWeb表現技法17件。Flexbox ホーリーグレイル、aspect-ratio メディアグリッド、CSS multi-column テキスト、スプリットスクリーン 50/50 など。ライブデモとコピーできるコード付き。
Flexbox ホーリーグレイル
ヘッダー・フッターと固定幅の両サイド＋伸縮する中央カラムを Flexbox で構成する定番の3カラム管理画面レイアウト。
aspect-ratio メディアグリッド
aspect-ratio をCSS変数で制御し、1:1/4:3/16:9などの比率を保ったままタイルを敷き詰める画像ギャラリー。比率切替も滑らかに。
CSS multi-column テキスト
column-width・column-rule・column-span で新聞風の段組み本文を組む。ドロップキャップや見出しの段ぶち抜きも実演。
スプリットスクリーン 50/50
画面を左右50/50に分割し、それぞれ異なるトーンのコンテンツを配置するランディングページの定番構成。狭い画面では自動的に縦積みへ切り替わる。
オートフィット・カードグリッド
grid-template-columns の repeat(auto-fit, minmax()) で列数が自動増減するカードグリッド。幅ボタンで折返しの変化を確認できる。
フルブリード交互セクション
全幅の帯セクションが明るい配色と暗い配色で交互に並ぶランディングページ構成。帯の中身は中央のmax-widthに収まり、スクロールで順にふわりと現れる。
読みやすい本文レイアウト
本文をmax-width: 65chの読みやすい行長に収め、写真や図版だけをグリッドで全幅にはみ出させるブレイクアウト構成の記事レイアウト。読了プログレスバー付き。
CSS Grid マガジンレイアウト
grid-template-areas で名前付きエリアを定義し、雑誌の誌面のようにヒーロー・索引・ヘッダーを組む。複雑な誌面構成を宣言的に表現できる。
CSS-only Masonry風グリッド
column-count と break-inside: avoid だけで、高さの異なるタイルを石積み状に並べる Masonry 風ギャラリー。JSのライブラリ不要。
Container Queries 適応カード
container-type と @container で、置かれたコンテナの幅に応じて同じカードが縦積み↔横並びへ切り替わる。スライダーで挙動を体感できる。
ベントグリッド
grid-column / grid-row の span で大小のタイルを組み合わせる、近年流行のベント風ダッシュボードレイアウト。クリックで発光パルス。
Sticky スタックスクロール
position: sticky と top のずらしで、スクロールするとカードが重なり積み上がるストーリーテリング向けレイアウト。進捗バーをJSで連動。
アプリシェル（サイドバー＋ヘッダー）
管理画面の定番構成。左サイドバー・上ヘッダー・メインを CSS Grid の grid-template-areas で組み、ボタンでサイドバーを畳んで表示領域を広げられる。
スティッキー目次サイドバー
本文の隣に置いた目次サイドバーが position:sticky で追従し、スクロールしても画面内に留まり続ける。長文記事や技術ドキュメントの目次に最適な構成。
ウィジェット・ダッシュボード
grid-auto-flow: dense と可変スパンで大小のウィジェットを隙間なく敷き詰めるダッシュボード。並び替えやクリック拡大で密集アルゴリズムの動きを体感できる。
マスター/詳細2ペイン
左に一覧、右に詳細を並べるマスター/詳細レイアウト。項目クリックで右ペインが切替わり、狭い画面では1ペイン表示に自動で切替わり戻るボタンで一覧へ戻れる。
Subgrid カード整列
grid-template-rows: subgrid で各カードが親グリッドの行ラインを継承し、本文の長さが違っても見出し・価格・ボタンの高さがピタリと揃う料金表。