不能用<table>做图片画廊，因其语义错误、响应式难实现、可访问性差；应使用<div>+CSS Grid，仅需三行CSS即可实现自适应布局，并通过aspect-ratio和object-fit解决图片变形与加载抖动问题。
别用 <table> 做图片画廊，它语义错误、响应式难搞、维护成本高；用 <div> + CSS Grid 是现代标准做法，写法少、适配强、改起来不崩溃。
为什么不能用 <table> 放图片
表格标签的本意是展示二维数据（比如价格表、课程表），不是布局容器。强行用 <tr>/<td> 套图片会带来三个硬伤：
-
<table>默认有边框、单元格间距、对齐逻辑，要清空这些样式得写一堆重置 CSS，稍不注意就塌陷或错位 - 响应式时无法自动换列——你得靠媒体查询手动改
colspan或嵌套<div>，最后代码比 Grid 还臃肿 - 搜索引擎和读屏器会误判内容结构，把图库当成数据表，影响可访问性和 SEO
<div> + display: grid 的最小可行写法
不需要框架、不依赖 JS，纯 HTML+CSS 就能跑通。关键就三行 CSS：
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
}
对应 HTML 只需一层包裹 + 若干 <div> 项：
<div class="gallery"> <div><img src="1.jpg" alt="描述1"></div> <div><img src="2.jpg" alt="描述2"></div> <div><img src="3.jpg" alt="描述3"></div> </div>
说明：
-
minmax(280px, 1fr)表示每列至少 280px，超出后均分剩余空间；小屏下自动退为单列 -
auto-fill比auto-fit更稳——它保留空列占位，避免网格错行（尤其在 JS 动态增删图时） -
gap控制间距，千万别用margin，否则 Grid 容器可能塌陷或触发外边距合并
图片变形、高度塌陷、加载闪动怎么防
这是用 <div> 布局最常踩的坑，根源在于图片加载前高度为 0，Grid 无法预留空间。解决必须分两层控制：
- 给每个图片容器（即
<div>子项）设aspect-ratio: 4/3+width: 100% - 再让
<img>填满：加width: 100%; height: 100%; object-fit: cover; - 旧浏览器（如 Safari 15.4 之前）不支持
aspect-ratio，可用height: 0; padding-bottom: 75%替代（4:3 → 75%） - 绝对不要只写
img { width: 100% }而不控高，否则首屏加载时画廊会“抖一下”变高
加交互（点击放大/分类过滤）要不要改 HTML 结构
不用重写结构，只加两个轻量约定即可：
- 缩略图上加
data-large-src="large.jpg"，lightbox 脚本直接读这个值，不用额外 DOM 查找 - 分类过滤时，每张图加
data-category="nature"，按钮加data-filter="nature"，JS 用element.matches('[data-category="nature"]')匹配，比 class 切换更干净 - 过滤时别用
display: none，改用visibility: hidden+position: absolute避免破坏懒加载和滚动锚点
真正麻烦的从来不是怎么排版，而是图片尺寸不一、加载时机不可控、旧浏览器兜底逻辑没写全——这些细节漏一个，画廊就在某台 iPhone 或某个 Chrome 版本里裂开。
