卡片网格应使用display: grid实现，配合auto-fit与minmax(280px,1fr)实现响应式列数，通过overflow、text-overflow、line-clamp等控制内容溢出，并为IE11提供flex降级方案。
卡片网格用 display: grid 最直接
不用 flex 嵌套、不用 float、不靠 JS 计算列数——现代浏览器里，grid 是构建响应式卡片容器最可控的方式。它天然支持等高、对齐、间距统一，且媒体查询只需改一两个值。
常见错误是把 grid-template-columns 写死成 repeat(3, 1fr)，结果小屏上卡片被压扁或溢出。正确做法是结合 minmax() 和 auto-fit：
cards-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
}-
280px是单张卡片最小宽度，低于此值就自动换行 -
1fr表示剩余空间均分，不是固定像素 -
auto-fit比auto-fill更实用：空轨道会被合并，避免空白列 - 别忘了加
gap，它比margin更干净，不触发 margin 折叠
卡片内部结构要防文字撑破容器
卡片内容长度不一时，标题过长、描述换行异常、图片没约束，都会破坏网格整齐性。这不是 grid 的问题，而是子元素没设防。
关键控制点在卡片自身和内部文本节点：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 给卡片加
overflow: hidden防止绝对定位元素溢出 - 标题用
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，但必须配合width或max-width才生效 - 描述段落加
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;截两行（注意 Safari 兼容性） - 图片统一用
img { width: 100%; height: auto; display: block; }，避免底部留白
IE11 兼容？别硬扛，用降级方案
grid 在 IE11 中仅支持旧语法（display: -ms-grid），且不支持 auto-fit、minmax() 等核心特性。强行兼容会导致代码膨胀、行为不一致、调试困难。
更实际的做法是提供可维护的降级路径：
- 用
@supports (display: grid)包裹 grid 样式，确保老浏览器跳过 - 外部容器先写
display: flex; flex-wrap: wrap;作为 fallback - 卡片设
flex: 0 0 calc(33.333% - 1rem)控制列数，再用媒体查询调为50%或100% - 不要试图用 Autoprefixer 自动生成 IE grid，它生成的是不可靠的模拟布局
响应断点别只看设备尺寸，要看内容密度
很多人按 768px、1024px 硬切断点，但卡片宽度实际取决于字体大小、内边距、图片比例。同一断点下，中文标题多字 vs 英文短标题，视觉拥挤度完全不同。
建议以容器宽度为锚点，而非视口：
- 用
container query（Chrome 111+）替代媒体查询，但需检查目标环境支持度 - 暂不支持时，用 JS 监听
ResizeObserver动态切换 class，比如当卡片容器宽度< 600px时强制单列 - 测试时用 Chrome DevTools 的「Toggle device toolbar」+「Edit responsive dimensions」拖动宽度，观察卡片何时开始挤压，再反推断点值
真正难的不是写出能跑的网格，而是让不同长度的文字、不同比例的图、不同行数的描述，在所有尺寸下都不“打架”。这需要每一层都设边界，而不是寄希望于 grid 自动兜底。
