🖼️ 图片画廊

使用 <div class="gallery"> 作为容器，每个 .gallery-item 包含一个图片占位区和信息覆盖层 .overlay。

<div class="gallery">
    <div class="gallery-item">
        <a href="#">
            <div class="img-placeholder">🏔️</div>
            <div class="overlay">
                <h3>Mountain Sunset</h3>
                <p>Nature Photography</p>
            </div>
        </a>
    </div>
    ...
</div>

使用 grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) 实现自动响应式网格。每列最小 240px，自动填充，平均分配剩余空间。

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

使用 position: absolute 让覆盖层叠在图片上方，默认隐藏（opacity: 0），悬停时显示。同时让图片放大 scale(1.08) 增加动感。

.gallery-item .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.25rem;
    opacity: 0;
    transition: opacity 0.3s;
}
.gallery-item:hover .overlay { opacity: 1; }
.gallery-item:hover .img-placeholder { transform: scale(1.08); }

使用 :nth-child() 选择器为每个项目分配不同的渐变背景色，模拟不同风格的图片，无需实际图片即可展示画廊效果。

.gallery-item:nth-child(1) .img-placeholder {
    background: linear-gradient(135deg, #667eea, #764ba2);
}
.gallery-item:nth-child(2) .img-placeholder {
    background: linear-gradient(135deg, #f093fb, #f5576c);
}
/* ... 更多色彩组合 */

你的响应式图片画廊已完成！CSS Grid 自动适应屏幕宽度，悬停时有优雅的文字遮罩和图片缩放效果。所有代码纯 HTML + CSS。

💡 扩展思路：替换 placeholder 为真实 <img> 标签，添加全屏灯箱预览（需要一点 JS），或者使用 CSS filter 添加黑白/彩色切换效果。