最常用组合是grid-cols-1 md:grid-cols-2 lg:grid-cols-3，因其实现小屏单列、中屏双列、大屏三列的移动端优先响应式骨架，且Tailwind断点按最小宽度逐级覆盖，md≥768px、lg≥1024px，确保各区间列数明确可控。
直接用 grid + gap + 屏幕断点类就能实现响应式卡片网格，不需要写一行 CSS，但必须理解 Tailwind 的断点逻辑和 grid 列数控制方式。
为什么 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 是最常用组合
这是响应式卡片网格的骨架结构：小屏单列、中屏双列、大屏三列。Tailwind 的断点基于最小宽度（md 表示 ≥768px），不是“仅在 md 下生效”，所以后续断点会覆盖前面的设置。
-
grid-cols-1是基础值，所有屏幕都适用，除非被更高断点覆盖 -
md:grid-cols-2在 ≥768px 时变成 2 列，同时覆盖了grid-cols-1 -
lg:grid-cols-3在 ≥1024px 时变成 3 列，覆盖前两者 - 列数变化只影响
grid-template-columns，卡片自身宽高、间距靠gap和内边距控制
卡片内容溢出或高度不一致怎么办
默认情况下，grid 子项不会拉伸对齐，导致卡片高度参差不齐，尤其当标题行数不同或图片缺失时。解决核心是让卡片容器“强制等高”且内容不撑破布局。
- 给卡片容器加
flex flex-col，再用flex-grow让内容区占满剩余空间 - 标题用
line-clamp-2（需启用line-clamp插件）限制行数，避免高度失控 - 图片用
object-cover h-48 w-full固定尺寸，不随文字变化缩放 - 避免对卡片本身设固定
h-类，否则小屏下文字换行可能溢出
如何让卡片间距在不同断点下合理缩放
gap 类也支持响应式，但注意它作用于 grid 容器，不是单个卡片——这意味着你不能只调水平间距而不动垂直间距。
立即学习“前端免费学习笔记（深入）”；
- 用
gap-4 md:gap-6 lg:gap-8逐步增大间隙，视觉上更舒适 - 不要混用
gap-x/gap-y和普通gap，后者会覆盖前者 - 如果需要小屏无间隙、大屏有间隙，写成
gap-0 md:gap-4，而不是试图用sm:gap-0—— 因为sm断点（≥640px）通常比实际需求更早触发 - 间隙单位建议用
gap-4（1rem）起手，避免用gap-1这类过小值，移动端点击区域太小
移动端点击区域小、卡片难点击的隐藏问题
卡片常包裹 <a> 或 <button>，但若只给子元素设 padding，点击热区仍局限在文字/图片范围内。
- 确保可点击容器（如
<article>或<div>）本身有足够内边距：p-4 md:p-6 - 移除子元素的
mt/mb，改用space-y或flex flex-col gap-y控制内部间距，避免外边距塌陷导致热区断裂 - 测试真机点击：Chrome DevTools 的 “Toggle device toolbar” 只模拟视口，不模拟触摸热区精度，务必在手机上点几次确认
真正麻烦的是内容长度不可控时的截断与对齐——line-clamp 在 Firefox 旧版本不支持，min-h- 类容易和 flex 布局冲突，这些细节不试一遍根本想不到。
