3列ホバーキャプションギャラリー
写真を3列グリッドで見せつつ、一部を横長（wide）にしてリズムを付けたフォトギャラリーです。基本は grid-template-columns:repeat(3,1fr) の等幅3列で、 gl__item--wide を付けたタイルだけ grid-column:span 2 で2マス分の横幅を取ります。
このパーツの使いどころと実装ポイント
写真を3列グリッドで見せつつ、一部を横長（wide）にしてリズムを付けたフォトギャラリーです。基本は grid-template-columns:repeat(3,1fr) の等幅3列で、gl__item--wide を付けたタイルだけ grid-column:span 2 で2マス分の横幅を取ります。すべてのタイルに aspect-ratio を指定しているため、写真サイズがばらついても枠がきれいに揃います。
ホバー演出
マウスを乗せると写真が transform:scale(1.06) でゆっくり拡大し、下から薄い暗幕グラデーションとともにキャプション（Working Space など）がフェードインします。普段は写真だけを見せ、操作した瞬間に説明を出す、ノイズの少ない見せ方です。
向く場面と注意
- オフィス・制作現場の紹介
- 飲食店の料理・店内ギャラリー
- イベントやワークショップの記録写真
横長タイルを入れる位置を変えるだけで全体の印象が変わります。画像の alt は「何が写っているか」を具体的に書いてください。キャプションはホバーでしか出ないため、内容理解に必須の情報は alt 側にも持たせます。レスポンシブはすでに2列・1列へ段階的に折り返す指定が入っており、狭い画面では横長タイルも通常比率に戻して破綻を防いでいます。
よくある質問
横長の写真はどう作っていますか。
gl__item--wideクラスを付けたタイルにgrid-column:span 2を指定し、横2マス分を占めさせています。クラスを付け外しするだけで、どの写真を大きく見せるか自由に変えられます。
スマホではレイアウトが崩れませんか。
崩れません。画面幅768px以下で2列、480px以下で1列へ自動で折り返し、横長タイルも通常の比率に戻すよう指定済みです。そのまま使ってもモバイルで見やすく表示されます。