零基础可用css grid+语义化figure/figcaption实现响应式相册：30行代码搞定，避免div堆砌导致的错位与维护难题，含兼容方案及本地调试提示。
零基础也能做，但别从纯 HTML 开始——直接用 把下面这段塞进 注意： 每张图一个 文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。 关键点： IE 11 不支持 更实际的问题是：本地双击打开 HTML 文件时，Chrome 可能因安全策略拒绝加载本地图片（报 <figure></figure> + <figcaption></figcaption> 搭配 CSS Grid，30 行代码搞定响应式相册网格，比手写 <table> 或一堆 <code><div> 更可靠、更易维护。<h3>为什么不用 <code><div> 堆网格？<p>新手常把每张图包一层 <code><div>，再用 <code>display: inline-block 或浮动强行排版。结果是：图片宽高不一致时错位、文字描述对不齐、手机上看全挤成一列、缩放后间隙忽大忽小。
<figure></figure> 是语义化容器，浏览器和屏幕阅读器能识别这是“一个独立的媒体单元”<figcaption></figcaption> 天然绑定图片，不用额外 id/for 关联grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 这一行就解决“在不同屏宽下自动换列”必须写的三段 CSS（复制就能用）
<style></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 结构只要照抄这个模板
<figure></figure>，顺序写下去就行，不用编号、不用 class，Grid 会自动分配位置：
<main class="gallery"><figure>
@@##@@
<figcaption>2024.06｜三亚</figcaption></figure><figure>
@@##@@
<figcaption>2024.05｜杭州</figcaption></figure><!-- 更多 figure... --></main>
alt 属性不能空，哪怕写“照片1”，否则无障碍访问失败，部分浏览器会显示 broken image 占位符photos/2024-01.jpg），确保文件夹结构和 HTML 在同一级或正确嵌套<figure></figure> 加 width 或 float —— Grid 已接管布局，加了反而冲突容易被忽略的兼容性坑
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; }
}
net::ERR_FILE_NOT_FOUND）。解决方法只有两个：python3 -m http.server 启个本地服务，或者把文件拖进 VS Code Live Server 插件窗口里打开。
