最稳起点是display: grid + grid-template-columns: repeat(4, 1fr)，配合gap: 16px；真响应式需改用repeat(auto-fit, minmax(280px, 1fr))，确保小屏自动降为两栏或单栏。
用 display: grid 写四栏等宽布局，别碰 float 和 flex
直接上 display: grid + grid-template-columns: repeat(4, 1fr)，这是最稳的起点。你不用算 margin、不用清浮、不用防 flex-wrap 溢出——浏览器自己均分剩余空间，且所有子元素自动填入，无需额外 class 或 wrapper。
常见错误是手写 width: 25% 配 float: left，稍有 padding 或 border 就少一栏；或用 flex: 1 却漏加 flex-wrap: wrap，小屏直接横向滚动。
-
1fr是比例单位，不是像素，缩放不崩 - 务必配
gap: 16px，别用margin模拟间距——后者会和子元素 margin 合并，小屏下错位 - HTML 结构保持干净：
<div class="grid-4"><div>栏目一</div><div>栏目二</div></div>，别嵌套多余div
让四栏在手机上自动变成两栏或单栏，关键在 minmax()
硬写 repeat(4, 1fr) 只适用于桌面固定列数。真响应式得换写法：repeat(auto-fit, minmax(280px, 1fr)))。其中 280px 是卡片最小宽度（兼顾 iPhone SE 宽度），auto-fit 会让空列自动收缩，剩余空间由现有卡片均分。
抄别人代码里的 minmax(300px, 1fr) 往往在手机上崩：容器总宽小于 300px × 4 时，浏览器要么压缩文字、要么强制横向滚动。
立即学习“前端免费学习笔记（深入）”；
-
auto-fit优于auto-fill：后者保留“看不见的列”，小屏下卡片被硬塞进无效轨道 - 别给父容器设
width: 100%同时又用1fr，窄屏下 Grid 可能算出负值 - 如果只有 1–2 张卡片，
auto-fit会自动拉伸它们占满整行，不会留白
卡片内部高度失控？不是 Grid 的锅，是卡片自己没立住
Grid 只管列数和行对齐，但每张卡片内部结构乱，就会出现图片撑高、文字截断位置飘忽、按钮悬空——这和 grid-template-columns 无关。
典型症状：鼠标 hover 放大时，下方卡片“弹一下”。根源是卡片没锚定基线，渲染层变化后高度浮动。
- 给卡片加
display: flex; flex-direction: column; height: 100% - 内容区（如
.card-body）设flex: 1吸收剩余空间 - 底部按钮用
margin-top: auto贴底，别用position: absolute——Safari 下容易错位 - 图片必须包一层
overflow: hidden容器，并设img { width: 100%; height: auto; object-fit: cover; }
为什么 gap 和 margin 不能混用
一边写 gap: 1.5rem，一边又给卡片加 margin: 1rem，结果间距翻倍、小屏卡片挤成一团、甚至溢出容器——这不是 bug，是底层逻辑冲突。
gap 是 Grid 原生属性，只作用于网格项之间，不触发外边距合并；而 margin 是通用布局属性，加在卡片上会干扰 Grid 的轨道计算，尤其在 auto-fit 动态重排时表现不可预测。
- 旧教程里用
:not(:last-child)清除末项margin，现在纯属冗余；gap已覆盖全部需求 - 如需兼容 IE11，可用
grid-column-gap/grid-row-gap替代，但别为它妥协现代写法 - hover 动效卡顿，90% 是因为没设
min-height锚定基线，比如min-height: 180px
真正难的不是写出能跑的代码，而是理解 minmax() 中那个最小宽度怎么选、auto-fit 在什么条件下会合并列、以及卡片内部为何必须用 flex 立住高度——这些点不试错几遍，光看文档很难到位。
