3 列フォトグリッド
このパーツは、写真を display:grid の grid-template-columns:repeat(3,1fr) で 3 列に並べたシンプルなフォトギャラリーです。各セルは aspect-ratio:1/1 で正方形に固定しているため、元写真の縦横比がばらついていても格子が崩れません。
このパーツの使いどころと実装ポイント
このパーツは、写真を display:grid の grid-template-columns:repeat(3,1fr) で 3 列に並べたシンプルなフォトギャラリーです。各セルは aspect-ratio:1/1 で正方形に固定しているため、元写真の縦横比がばらついていても格子が崩れません。マウスを乗せると transform:scale(1.03) でわずかに拡大し、画像が見られていることを伝えます。
向いている場面
制作実績の一覧、飲食店のメニューや内装写真、美容サロンの施術ビフォーアフター、ハンドメイド作品の作品集など、同じ粒度の写真を等間隔で見せたいケースに合います。タイトルは Georgia のセリフ体で「Works」と置いており、ポートフォリオやコーポレートの実績欄にそのまま馴染みます。
カスタマイズの勘所
- 現状は
linear-gradientのダミー背景なので、各a要素に実写をbackground-imageかimgで差し込む - 列数は
repeat(3,1fr)の数字を変えるだけで 4 列・5 列に増減できる - セル間の隙間は
gapで一括調整できる
レスポンシブは max-width:720px で 2 列へ自動切り替えする設計です。実装時はリンク先がない a に href を付け、画像には必ず内容を表す alt を入れてください。ホバー演出はマウス操作前提なので、タップ環境ではタップで詳細へ遷移できる導線も用意すると親切です。
よくある質問
写真の縦横比がバラバラでもきれいに並びますか
並びます。各セルに aspect-ratio:1/1 を指定し overflow:hidden で切り抜いているため、元画像の比率が違っても正方形の格子に揃います。中心からはみ出す部分は隠れるので、見せたい被写体が中央に来る写真を選ぶと失敗しません。
列の数を変えたいときはどこを直せばいいですか
CSS の grid-template-columns:repeat(3,1fr) の数字を変えるだけです。4 にすれば 4 列、2 にすれば 2 列になります。あわせて 720px 以下のメディアクエリの列数も調整すると、スマホでの見え方を整えられます。