通过结合 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 的自然流畅动画曲线。200px 中的 minmax(200px, 1fr) 部分，可以调整单个项目的最小尺寸。值越大，并排显示的最大数量就越少。16 / 9（宽版）或 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）支持。