レスポンシブCSS Gridギャラリー

display: gridとgrid-template-columns: repeat(auto-fit, minmax(..., 1fr))を組み合わせることで、メディアクエリ（@media）を一切記述せずに、画面幅に合わせてカラム数が自動的に変化するレスポンシブな画像ギャラリーを実装できます。

プレビュー (Preview)

ユースケースと特徴 (Use Cases & Features)

ポートフォリオや写真ギャラリー: 画像を敷き詰めて美しく見せたい場合に最適です。
ECサイトの商品一覧: 商品カードを並べるレイアウトにも応用可能です。
メディアクエリ不要: auto-fitとminmaxを使用しているため、コードが非常にシンプルになり、保守性が向上します。

デザインとUXのポイント (Design & UX)

アスペクト比の固定: aspect-ratio: 1 / 1 と object-fit: cover を組み合わせることで、元画像の縦横比が異なっていても常に正方形で統一された美しいグリッドを保ちます。
ホバーエフェクト: 画像にマウスを乗せた際に、わずかに浮き上がるアニメーション（transform: translateYとscale）とシャドウの強化を追加し、触れる要素であることをユーザーに直感的に伝えます。
スムーズなトランジション: cubic-bezierを使用した自然で滑らかなアニメーションカーブを採用しています。

カスタマイズ方法 (Customization Guide)

最小幅の変更: minmax(200px, 1fr) の 200px の部分を変更することで、1つのアイテムの最小サイズを調整できます。値を大きくすると、横に並ぶ最大数が少なくなります。
アスペクト比の変更: aspect-ratio: 16 / 9（横長）や aspect-ratio: 3 / 4（縦長）に変更することで、用途に合わせたレイアウトが可能です。

実装コード (Implementation)

index.html

<div class="gallery">
<img src="/gallery/1.png" alt="Gallery image 1" class="gallery-item" />
<img src="/gallery/2.png" alt="Gallery image 2" class="gallery-item" />
<img src="/gallery/3.png" alt="Gallery image 3" class="gallery-item" />
<img src="/gallery/4.png" alt="Gallery image 4" class="gallery-item" />
<img src="/gallery/5.png" alt="Gallery image 5" class="gallery-item" />
<img src="/gallery/6.png" alt="Gallery image 6" class="gallery-item" />
</div>

styles.css

.gallery {
display: grid;
/* 200pxを下回らない範囲で、自動的に列数を調整してコンテナを満たします */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
padding: 16px;
width: 100%;
box-sizing: border-box;
}

.gallery-item {
width: 100%;
/* 常に正方形を保つ */
aspect-ratio: 1 / 1;
/* 画像の比率が崩れないようにトリミング */
object-fit: cover;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
            box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}

.gallery-item:hover {
/* ホバー時に少し浮き上がるようなエフェクト */
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
z-index: 10;
}

ブラウザ対応状況 (Browser Support)

display: grid および aspect-ratio は、すべてのモダンブラウザ（Chrome, Firefox, Safari, Edge）でサポートされています。
古いブラウザ（IE11など）には対応していないため、必要であればフォールバックを検討してください。