display: grid 更适合看板布局，因其天然支持列数控制、行高自适应及卡片跨行/跨列；而 float 易塌陷、inline-block 有空白间隙且对齐困难。
为什么 display: grid 比 float 或 inline-block 更适合看板布局
因为看板本质是「多列等宽容器 + 卡片自由堆叠」，display: grid 天然支持列数控制、行高自适应、卡片跨行/跨列，而 float 容易塌陷、inline-block 有空白间隙且无法精准对齐。
常见错误现象：margin 算错导致最后一列换行、卡片高度不一致造成列高参差、用 flex-wrap 做多列时无法控制列数。
- 用
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))实现响应式列数，比写死3fr 3fr 3fr更可靠 - 避免给卡片设固定
height，改用min-height配合grid-auto-rows: minmax(min-content, auto) -
gap必须设在容器上，不是卡片上；设成16px比1rem更易调试像素对齐
卡片拖拽后位置错乱？检查 grid-area 和 order 是否混用
看板常配合拖拽库（如 react-dnd 或 sortablejs）更新顺序，但直接改 order 会破坏网格流，而硬塞 grid-area 又容易覆盖默认定位。
使用场景：用户把卡片 A 从第 2 列拖到第 1 列第 3 行，DOM 顺序变了，但 CSS 网格没重排。
立即学习“前端免费学习笔记（深入）”；
- 只靠 DOM 顺序驱动布局：确保容器用
grid-auto-flow: row（默认值），不设grid-template-areas - 禁用
order—— 它会强制卡片脱离文档流顺序，和grid的自动填充逻辑冲突 - 拖拽后只需更新卡片在数组中的索引，让渲染层重新生成 DOM，由
grid自动重排，不手动干预grid-column或grid-row
grid-column: span 2 卡片卡在第一列不动？可能是 grid-auto-flow 设成了 column
想让某张卡片横跨两列，写了 grid-column: span 2，结果它死活不出现在预期位置，甚至挤到最右边——大概率是容器的 grid-auto-flow 被误设为 column，导致网格优先填满行再填列，和人眼直觉相反。
性能影响：grid-auto-flow: column 在卡片数量多时会显著增加重排开销，尤其 Safari 下更明显。
- 绝大多数看板应保持
grid-auto-flow: row（无需显式声明） -
span值必须小于等于容器总列数，比如repeat(3, 1fr)下不能span 4 - 若需某卡片固定列位置（如始终在第 2 列），用
grid-column: 2 / 3，而非依赖span推算
移动端卡片堆叠变单列但间距爆炸？别只改 grid-template-columns
在媒体查询里把 grid-template-columns 改成 1fr，本意是单列，结果卡片上下留白大得离谱——问题出在 gap 还是桌面端的 16px，而单列时垂直 gap 会叠加在每张卡片之间，视觉上被放大。
兼容性注意：iOS 15.4 之前，gap 在 grid 中不支持百分比值，必须用 px、rem 或 em。
- 移动端建议将
gap缩小到12px或0.75rem，而不是沿用桌面值 - 不要用
grid-template-rows: repeat(100, minmax(100px, auto))控制高度——这会让空行也占空间，改用grid-auto-rows: minmax(100px, auto) - 如果卡片内含图片，记得给
img加width: 100%; height: auto;，否则会撑破网格轨道
真正麻烦的是动态列数 + 拖拽 + 移动端缩放三者叠加时，minmax() 的最小值会被设备像素比干扰，这时候宁可多写一条 @supports (width: 100dvw) 降级处理，也不要硬扛。
