CSS Grid 是实现响应式多列卡片广告最直接可控的方式，关键用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))) 配合 gap；需配合 line-clamp、margin-top: auto 解决高度不一致问题，并优先使用容器查询适配。
用 CSS Grid 实现响应式多列卡片广告最直接
不用浮动、不用 Flex 嵌套，display: grid 是当前最可控的方式。关键在 grid-template-columns 和 gap 的组合——它能天然避免传统布局中因内容高度不一导致的错位问题。
常见错误是硬写 grid-template-columns: repeat(3, 1fr) 然后发现小屏上挤成一团。正确做法是配合 minmax() 和 auto-fit：
.ad-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
}-
280px是单张卡片最小宽度，低于此值自动减少列数 -
1fr让剩余空间均分，比固定像素更适应不同屏幕 -
auto-fit比auto-fill更实用：空列会被压缩消失，不会留白
Flexbox 也能做，但要注意 wrap 和对齐陷阱
如果项目已重度依赖 Flex，或需兼容 IE11（虽不推荐），可用 flex-wrap: wrap。但必须显式控制子项宽度和 flex-basis，否则卡片可能撑满整行或塌缩为单列。
典型翻车场景：flex: 1 写在卡片上 → 所有卡片强行等宽，图片被拉伸；或忘了设 box-sizing: border-box → padding + width 超出容器。
立即学习“前端免费学习笔记（深入）”；
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 每张卡片加
flex: 0 0 calc(33.333% - 16px)（假设三列+16px间距） - 外层容器必须设
display: flex+flex-wrap: wrap - 所有卡片统一设
box-sizing: border-box，避免边框/内边距破坏计算
卡片内部结构要防“高度不一致”引发的视觉断裂
广告卡片常含标题、描述、按钮，文字行数不一会导致卡片高度参差，Grid/Flex 都会因此出现空白错位。这不是布局问题，而是内容渲染问题。
- 标题用
line-clamp限制行数（display: -webkit-box+-webkit-line-clamp: 2） - 描述区域设固定
min-height或用height: 0; overflow: hidden配合 JS 动态展开 - 按钮统一用
margin-top: auto推到底部（需父容器display: flex; flex-direction: column） - 避免用
vertical-align: top—— 它对 Flex/Grid 子项无效
移动端适配别只靠媒体查询，优先用容器查询（container queries）
传统方案是监听 viewport 宽度，但卡片实际宽度受父容器限制（比如侧边栏收缩后主区变窄）。CSS Container Queries 允许卡片自己感知“我被塞进多宽的盒子里”，更精准。
需两步：给卡片容器加 container-type: inline-size，再用 @container 写断点：
.ad-card {
container-type: inline-size;
}
@container (min-width: 300px) {
.ad-card h3 { font-size: 1.1em; }
}
@container (min-width: 480px) {
.ad-card .cta-btn { display: block; }
}注意：Chrome 105+、Firefox 110+、Safari 16.4+ 支持，旧浏览器需回退到媒体查询。真正容易被忽略的是：容器查询要求父容器有明确尺寸（不能是 width: auto 且无约束），否则查询不触发。
