display: gridとgrid-template-columns: repeat(auto-fit, minmax(..., 1fr))を組み合わせることで、メディアクエリ（@media）を一切記述せずに、画面幅に合わせてカラム数が自動的に変化するレスポンシブな画像ギャラリーを実装できます。
auto-fitとminmaxを使用しているため、コードが非常にシンプルになり、保守性が向上します。aspect-ratio: 1 / 1 と object-fit: cover を組み合わせることで、元画像の縦横比が異なっていても常に正方形で統一された美しいグリッドを保ちます。transform: translateYとscale）とシャドウの強化を追加し、触れる要素であることをユーザーに直感的に伝えます。cubic-bezierを使用した自然で滑らかなアニメーションカーブを採用しています。minmax(200px, 1fr) の 200px の部分を変更することで、1つのアイテムの最小サイズを調整できます。値を大きくすると、横に並ぶ最大数が少なくなります。aspect-ratio: 16 / 9（横長）や aspect-ratio: 3 / 4（縦長）に変更することで、用途に合わせたレイアウトが可能です。<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>.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;
}display: grid および aspect-ratio は、すべてのモダンブラウザ（Chrome, Firefox, Safari, Edge）でサポートされています。