最稳解法是用 display: grid 配合 minmax() 和 object-fit；grid-template-columns 用 repeat(auto-fit, minmax(260px, 1fr))) 实现自适应列数，图片容器设固定高或 aspect-ratio，img 设 width:100%; height:100%; object-fit:cover。
直接用 display: grid 配合 minmax() 和 object-fit，别靠图片原始尺寸撑布局——这是最稳、最省事的解法。
用 grid-template-columns: repeat(auto-fit, minmax()) 控制列数
列数必须随容器宽度自动变化，不能写死 grid-template-columns: 1fr 1fr 1fr。否则小屏下会横向滚动或图片被压缩。
-
auto-fit比auto-fill更合适：空轨道会被合并，避免右侧留白 - 最小列宽建议设为
250px～280px，低于这个值就自动减少一列 - 写成
repeat(auto-fit, minmax(260px, 1fr))，1fr让剩余空间均分，不依赖内容长度 - 别在子项上设
width或flex-basis，Grid 会把它和gap一起算进轨道宽度，导致列数变少
图片必须固定容器高 + object-fit 裁剪
商品图宽高比千差万别，靠 width: 100% + height: auto 会导致卡片高度不一致、网格错位。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 给图片外层容器（比如
.card img的父div）设aspect-ratio: 4/3或固定高度如height: 180px -
img本身设width: 100%; height: 100%; object-fit: cover;，保证构图不拉伸 - 若需兼容旧浏览器（Chrome aspect-ratio，否则加载前高度塌陷，引发布局抖动
- 禁用
vertical-align: middle等行内对齐方式——它只对 inline 元素生效，在 Grid 里无效还可能引入意外 baseline 间隙
别用 margin 控制卡片间距，改用 gap
gap 是 Grid 原生间距控制，比在每个卡片上加 margin 可靠得多。后者容易触发 margin 合并、计算偏差，尤其在父子嵌套时。
-
gap: 16px同时作用于行与列，无需分别写margin-bottom和margin-right - 不要写
:last-child { margin-right: 0 }这类补丁——Grid 的gap天然不作用于外边缘 - 如果降级到 Flex 布局（如需支持 IE11），才改用
flex: 0 0 240px+margin-right，但得手动处理:last-child
真正容易被忽略的是图片加载时机：哪怕 CSS 层结构再稳，如果图片没加载完就渲染，aspect-ratio 或固定高容器仍可能塌陷。所以务必配合 loading="lazy" 和显式 width/height 属性（即使只是占位数值），让浏览器提前分配空间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
