モザイク写真ギャラリー
大小のタイルが不規則に組み合わさる モザイク写真ギャラリー です。CSS Grid で4列の枠を作り、行の高さを grid-auto-rows でそろえたうえで、一部のタイルに grid-row:span 2 や grid-column:span 2 を与えて縦長・横長に広げています。
解説
大小のタイルが不規則に組み合わさるモザイク写真ギャラリーです。CSS Grid で4列の枠を作り、行の高さを grid-auto-rows でそろえたうえで、一部のタイルに grid-row:span 2 や grid-column:span 2 を与えて縦長・横長に広げています。これだけで均一なグリッドにリズムが生まれ、雑誌のような誌面感を出せます。ホバーすると少し拡大して不透明度が上がり、対象が手前に浮き出るよう仕上げています。
使いどころ
- 作品集やフォトギャラリーのトップ
- 商品やメニューを並べる一覧
- 事例やメンバー紹介のビジュアル配置
このサンプルは色のブロックで構成していますが、実際は各タイルを img に置き換えて使います。タイルの大小は --tall --wide クラスの付け外しで自由に組み替えられ、列数は grid-template-columns の値で変えられます。画像を入れる場合は object-fit:cover で枠に合わせ、幅・高さ属性と alt を付けて読み込みと意味づけに配慮してください。
よくある質問
色のブロックを実際の写真に差し替えるには
各タイルの中に img を入れ、object-fit を cover にして枠いっぱいに表示します。背景色の指定を画像に置き換える形で、写真ギャラリーとして使えます。
タイルの大きさのバランスは変えられますか
はい。縦長や横長を指定するクラスを付け外しすれば、どのタイルを大きく見せるか自由に組み替えられます。列数もグリッドの設定で変更できます。