零基础可用CSS Grid+语义化figure/figcaption实现响应式相册：30行代码搞定，避免div堆砌导致的错位与维护难题，含兼容方案及本地调试提示。
零基础也能做，但别从纯 HTML 开始——直接用 <figure> + <figcaption> 搭配 CSS Grid，30 行代码搞定响应式相册网格，比手写 <table> 或一堆 <div> 更可靠、更易维护。
为什么不用 <div> 堆网格？
新手常把每张图包一层 <div>，再用 display: inline-block 或浮动强行排版。结果是：图片宽高不一致时错位、文字描述对不齐、手机上看全挤成一列、缩放后间隙忽大忽小。
-
<figure>是语义化容器，浏览器和屏幕阅读器能识别这是“一个独立的媒体单元” -
<figcaption>天然绑定图片，不用额外id/for关联 - CSS Grid 控制列数和间距，
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))这一行就解决“在不同屏宽下自动换列”
必须写的三段 CSS（复制就能用）
把下面这段塞进 <style> 标签里，或单独保存为 style.css 并用 <link rel="stylesheet" href="style.css"> 引入：
figure {
margin: 0;
break-inside: avoid;
}
figure img {
width: 100%;
height: 240px;
object-fit: cover;
}
figure figcaption {
font-size: 0.875rem;
padding: 0.5rem 0.75rem;
background: #f8f9fa;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
}注意：object-fit: cover 能让不同比例图片统一裁切显示，避免拉伸变形；gap 控制格子间距，别用 margin —— 那会导致首行/末行多出空白。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
HTML 结构只要照抄这个模板
每张图一个 <figure>，顺序写下去就行，不用编号、不用 class，Grid 会自动分配位置：
<main class="gallery">
<figure>
<img src="photo1.jpg" alt="海边日落">
<figcaption>2024.06｜三亚</figcaption>
</figure>
<figure>
<img src="photo2.jpg" alt="咖啡馆角落">
<figcaption>2024.05｜杭州</figcaption>
</figure>
<!-- 更多 figure... -->
</main>关键点：
-
alt属性不能空，哪怕写“照片1”，否则无障碍访问失败，部分浏览器会显示 broken image 占位符 - 图片路径用相对路径（如
photos/2024-01.jpg），确保文件夹结构和 HTML 在同一级或正确嵌套 - 别给
<figure>加width或float—— Grid 已接管布局，加了反而冲突
容易被忽略的兼容性坑
IE 11 不支持 repeat(auto-fill, ...)，但你大概率不需要支持它。真要兼容旧环境，改用 grid-template-columns: repeat(3, 1fr) 并配合媒体查询：
@media (max-width: 768px) {
.gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.gallery { grid-template-columns: 1fr; }
}更实际的问题是：本地双击打开 HTML 文件时，Chrome 可能因安全策略拒绝加载本地图片（报 net::ERR_FILE_NOT_FOUND）。解决方法只有两个：python3 -m http.server 启个本地服务，或者把文件拖进 VS Code Live Server 插件窗口里打开。
