推荐用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 实现自适应卡片布局，配合 gap 控制间距、align-items: stretch 保证等高、响应式仅调小 minmax 最小值，并注意图片 max-width 和容器宽度继承。

grid-template-columns 配合 minmax() 实现卡片自适应

卡片宽度不能写死，否则在不同屏幕下会溢出或留白过多。minmax() 是关键：它让每列最小为一个合理值（比如 280px），最大撑满可用空间，同时配合 auto-fit 或 auto-fill 自动计算列数。

• grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) —— 推荐用 auto-fit，空列会被压缩掉，更紧凑
• auto-fill 会保留空轨道，适合需要对齐网格线的场景（如动画占位）
• 数值 280px 不是 magic number，应基于卡片最小可读宽度（含 padding + margin）估算
• 如果容器有 padding，记得用 box-sizing: border-box 避免计算偏差

gap 替代 margin 实现安全间距

卡片内部若有 margin，容易导致外边距合并或响应失效；gap 是 Grid 原生间距控制，只作用于网格项之间，不触发重排，语义清晰且兼容性好（Chrome 66+、Firefox 63+、Safari 16.4+ 支持完整）。

• 用 gap: 1rem 统一控制行列间距，比分别写 margin-right/bottom 更可靠
• 避免在卡片元素上同时用 gap 和 margin，尤其不要用 margin: auto 居中——Grid 有自己的对齐机制
• 若需首行/末行无上/下 gap，不能靠 margin 抵消，应改用 padding 容器内边距模拟

卡片内容高度不一致时用 align-items: stretch

默认 Grid 会让所有卡片拉伸至最高项高度，但前提是卡片容器未设置 height 或 max-height，且子元素没用 align-self: start 覆盖。

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• 确保卡片直接子元素（如标题、描述、按钮）没设 height 或 flex 相关属性干扰拉伸
• 如果想取消等高，加 align-items: start 到 grid 容器即可，无需改每张卡片
• 文字截断建议用 display: -webkit-box + -webkit-line-clamp，而非依赖高度固定

响应式断点只需调整 minmax 最小值

不需要为每个屏幕尺寸重写整个 grid-template-columns，只需在媒体查询里调小 minmax() 的第一个参数。

立即学习“前端免费学习笔记（深入）”；

• @media (max-width: 768px) { .grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
• 避免在断点中改 1fr 为具体像素——那会破坏自适应本质
• 如果小屏下仍想保持单列，可直接写 grid-template-columns: 1fr，比套 minmax() 更明确
• 注意 Safari 旧版本对 minmax() 在媒体查询中的解析有 bug，必要时加 @supports (display: grid) 包裹

实际中最容易被忽略的是卡片内图片或 iframe 没设 max-width: 100% 和 height: auto，它们会撑破网格轨道；还有就是忘了给 grid 容器设 width: 100% 或继承父宽——Grid 不会自动“填满”未知宽度的父容器。