用 grid-cols- 配合断点前缀控制列数，gap 控制网格间距，aspect-w/h- 锁定图片容器宽高比并配合 object-cover 防止变形，移除 max-w- 类确保移动端占满屏幕。
用 grid + grid-cols- 控制列数，别硬写 media query
Tailwind 的响应式网格本质是预设断点下的 grid-template-columns。直接用 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 就能按视口宽度自动切列，不用自己写 @media。注意断点前缀顺序必须从小到大（sm → lg），否则大屏会 fallback 到小屏规则。
gap 和 space-x/y 别混用，图片间距优先选 gap
网格内子项间距必须用 gap（或 gap-x/gap-y），space-x 是 Flex 布局专用，Grid 里无效。常见错误是给图片加 space-x-4 结果没反应——这时检查父容器是否用了 grid，如果是，立刻换成 gap-4。
-
gap-4：行列等距（8px） -
gap-x-6 gap-y-3：横向 12px，纵向 6px - 值单位统一是 Tailwind 的 spacing scale（
1=0.25rem，4=1rem）
图片宽高比不一致？用 aspect-w- + aspect-h- 锁定容器比例
原始图片尺寸杂乱时，直接设 width-full 会导致拉伸变形。Tailwind 提供 aspect-w-16 aspect-h-9 这类工具类，在父容器上声明宽高比，再让图片 object-cover w-full h-full 填充即可。关键点：
- 必须作用于图片的**直接父容器**（通常是 ）
aspect-w-和aspect-h-要配对使用，比如 4:3 写aspect-w-4 aspect-h-3- 不支持自定义比例（如 1.78），得换算成整数比或改用 CSS 自定义属性
@@##@@移动端单列但想撑满屏幕？小心
max-w-类干扰如果网格在手机上只显示一列却留白严重，大概率是外层容器加了
max-w-4xl这类限制最大宽度的类。响应式网格需要父容器「无约束」才能占满视口，解决方案：立即学习“前端免费学习笔记（深入）”；
- 删掉所有
max-w-、w-直接设宽的类 - 确保网格容器是块级且无 padding/margin 挤压（可用
mx-0 px-0强制清空） - 若需内容居中但又不限宽，用
container mx-auto替代max-w-
实际项目里最常漏掉的是
aspect-类必须配合object-cover使用，以及gap在 Grid 中不可被margin替代——这两处卡住的人最多。
