1枚目を大きく見せるタイル型フォトギャラリー。grid-column/grid-rowのspan指定だけで、雑誌のような変則グリッドが作れます。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
3列グリッドに grid-auto-rows で行の高さの「基準単位」を決めておき、目立たせたい1枚に grid-column: span 2 と grid-row: span 2 を指定するだけで、2×2マスを占有するメイン写真になります。残りの写真は自動配置に任せるため、枚数が増減してもHTMLを並べるだけで整います。実画像では各セルの img に width/height 100% と object-fit: cover を指定します。
写真が主役のギャラリーでは、装飾的な画像はalt=""（またはaria-hidden）、意味のある画像は内容が伝わるaltを書き分けてください。ホバー拡大はアニメ集「ホバーで画像ズーム」と組み合わせられます。
1枚目を大きく見せるタイル型画像ギャラリーを作ってください。3列グリッド＋grid-auto-rowsを基準に、メイン画像はgrid-column: span 2とgrid-row: span 2で2×2マスを占有させ、実画像はobject-fit: coverで収めてください。