必须加grid类才能启用网格布局，因为grid-cols-*仅设置grid-template-columns而不改变display属性；若父容器display为block或flex，列定义无效。
grid 类没加，grid-cols-* 就只是个摆设
拖拽排序组件的视觉反馈依赖网格结构稳定、子项可预测定位。但很多人写完 grid-cols-3 发现拖拽时项乱跳、对齐错位——根本不是拖拽逻辑的问题，而是网格本身就没生效。
为什么 grid-cols-3 写了却还是单列堆叠？
浏览器根本不认它：Tailwind 的 grid-cols-3 只生成 grid-template-columns: repeat(3, minmax(0, 1fr))，但前提是父容器得是 display: grid。
- 必须显式加
grid类（对应display: grid），不能只靠grid-cols-*或gap-4 - 如果父容器是
flex、block或没加任何布局类，col-span-2、gap全部失效，且不报错 - 用 DevTools 查
Computed标签页，确认display确实是grid，不是inline-grid或其他
拖拽中需要稳定网格轨道，grid-rows-* 得慎用
拖拽排序组件常配合 v-for 渲染列表，子项数量动态变化。此时若硬写 grid-rows-4，新增项会溢出或撑开隐式行，导致拖拽锚点偏移、视觉抖动。
- 多数场景下只设
grid-cols-*+gap即可，让 Grid 自动按内容生成行（隐式网格） - 只有当你明确需要固定行高（比如卡片高度一致、禁止换行），才加
grid-rows-[120px_120px]这类显式轨道 -
row-span-2在无显式行轨道时行为不可控——它可能回退为grid-row: span 2，但实际占位取决于内容高度，拖拽预览时容易错位
col-span-* 配合拖拽指示器时，列数必须匹配
拖拽排序常需插入“占位符”或高亮目标位置，比如拖动第 2 项到第 4 项前，要让占位符跨 1 列并居中显示。这时 col-span-1 要和父级 grid-cols-3 对齐，否则宽度崩塌。
- 在
grid-cols-3容器里，col-span-1占 1/3 宽；写成col-span-2就占 2/3，可能盖住相邻项 - 响应式下别漏掉基础值：
col-span-1 sm:col-span-2 md:col-span-1比只写md:col-span-1更安全——小屏没声明时，浏览器按默认auto处理，容易撑满整行 - 调试时临时加
bg-blue-100和outline，一眼看清占位符实际占据哪几列
gap 影响拖拽感知，但别用 margin 替代
拖拽过程中，用户依赖间隙判断插入位置。如果用子项的 mb-4 模拟间隙，拖拽项靠近时会出现“跳变”，因为 margin 不参与 Grid 轨道计算，而 gap 是网格固有属性。
- 统一用
gap-4（或gap-x-4 gap-y-2）控制网格项间距，它不占布局空间，不影响col-span计算 - 子项内部若需内边距，用
p-4；外部留白必须交给gap，否则拖拽预览框位置会偏移 - 旧版 Safari（iOS 15.4 之前）对
gap支持不全，真要兼容，得拆成row-gap-4 column-gap-4，而不是指望gap-4兜底
dragstart 事件没绑好，而是网格容器连基本 display 都没设对。列数、间隙、跨列这些看似细碎的配置，一旦错位，拖拽反馈就会失真——人眼识别“能插在哪”，全靠这些像素级的轨道对齐。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
