真正响应式图片墙应使用grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))，确保小屏自动减列、大屏增列，配合object-fit: cover和aspect-ratio控制高度，避免塌陷或空白。
直接用 display: grid 就能做出真正响应式图片墙，不用 JavaScript、不写一堆 @media 也能适配多数屏幕——但关键在 grid-template-columns 的写法和图片尺寸控制。写错一行，小屏就溢出或留大片空白。
grid-template-columns 怎么写才不卡死在三列
很多人抄 repeat(3, 1fr)，结果手机上强行挤三列，图片被压扁、换行错乱。这不是“响应式”，是“硬塞”。
-
minmax(250px, 1fr)表示每列最小 250px（保证图片可读），最大占满剩余空间 -
auto-fit会让空列自动收缩消失，只保留有内容的列；auto-fill则会预留空列，容易撑宽容器 - 小于 250px 时列数自动减少；宽度足够时列数自然增加，无需手动断点
- IE 不支持
auto-fit？别管它，2026 年已无必要兼容 IE
图片高度不一致导致网格塌陷怎么办
原始图宽高比不同，只设 height: 200px 会导致拉伸或上下留白；设 height: auto 又会让网格行高浮动，破坏对齐。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 每个
.grid-item必须有明确高度：推荐用aspect-ratio: 4/3（现代浏览器全支持） -
img上加width: 100%; height: 100%; object-fit: cover;，裁剪居中显示 - 别用
padding-top: 75%+position: absolute这套老方案，语义差、维护难 - 必须用
img的网格计算容易出错
hover 放大和懒加载怎么加才不翻车
加交互不是套个 transform: scale(1.05) 就完事——滚动卡顿、布局抖动、焦点错位都是常见副作用。
-
transform和opacity是安全属性，别在:hover里改width或height，会触发重排 - 加
will-change: transform前先确认是否真有性能瓶颈，多数场景不需要 -
loading="lazy"必须加到每个IntersectionObserver - 如果图多且首屏外，建议配合
srcset+sizes，让浏览器按视口宽度选图，而不是全量加载大图
最常被忽略的一点：语义化不是“锦上添花”，而是稳定性的基础。img 在 Grid 中的 display 计算 bug。别为了少写两个标签省事，最后在真机上调试两小时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
