应直接使用 grid 类启用原生 CSS Grid 布局，避免混用 Bootstrap 的 row/col 或 flex 类；优先选用框架提供的 grid、grid-cols-、gap- 等类，并注意断点配置、列宽控制与对齐属性的正确组合。
用 grid 类直接启用 CSS Grid 布局，别套 Bootstrap 的 row/col
现代 CSS 框架（如 Tailwind、UnoCSS、Windi CSS）已默认提供基于 display: grid 的原生网格类，不需要再模拟 Flex 行列嵌套。Bootstrap 5+ 虽支持 grid，但它的 row 仍是 display: flex，本质不是 Grid —— 这会导致你写 grid-template-columns 时被 row 的 flex-wrap 干扰，布局错位。
正确做法是跳过 row，直接用框架提供的 grid、grid-cols-*、gap-* 等类：
-
grid：等价于display: grid -
grid-cols-2→grid-template-columns: repeat(2, minmax(0,1fr)) -
grid-cols-[200px,1fr,2fr]（UnoCSS/Tailwind v4 支持）可写自定义轨道 -
md:grid-cols-3自动在中屏起切换列数，无需媒体查询手动写
响应式断点不是“写死的”，要查框架实际生效的 min-width
不同框架的 sm/md 断点值不同：Tailwind 默认 sm:768px，而 Bootstrap 是 sm:576px。如果你按文档写了 sm:grid-cols-2 却没生效，大概率是屏幕宽度卡在断点临界值附近，或者框架未启用该断点。
检查方法：
立即学习“前端免费学习笔记（深入）”；
- 打开浏览器开发者工具，选中元素，看计算样式里
grid-template-columns是否被覆盖 - 确认框架配置中是否启用了对应断点（例如 Tailwind 的
theme.screens是否删了md） - 用
max-w-md+grid-cols-1组合测试：若容器被限制在 768px 内，md:类根本不会触发
避免用 col-span- 拉跨时出现溢出或换行异常
col-span-2 类本质是 grid-column: span 2，但它不自动调整所在轨道尺寸。常见问题：在 grid-cols-3 中让一个子项 col-span-2，结果它撑宽了前两列，第三列被挤到下一行 —— 这是因为 Grid 默认按内容分配列宽，没设 minmax()。
解决方式：
- 强制列宽可控：
grid-cols-[repeat(3,minmax(0,1fr))]（UnoCSS）或grid-cols-3+ 配合min-w-0防文字撑开 - 跨列项内部用
truncate或overflow-hidden控制内容 - 避免嵌套 Grid：父级用
grid，子级又加grid，容易触发隐式网格线冲突
不要把 flex 和 grid 类混在同一个容器上
像 flex grid grid-cols-4 这种写法，flex 会覆盖 grid，最终生效的是 display: flex —— 浏览器只认最后一个声明。框架不会帮你去重或报错，CSS 层叠规则照常运行。
排查建议：
- 在开发者工具中检查元素的
display计算值，确认是不是grid - 删除所有疑似冲突的类，从
grid单独起步，再逐步加grid-cols-、gap- - 如果必须用 Flex 做主轴对齐（比如居中），改用
place-items-center或justify-items-center，它们是 Grid 原生对齐属性
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
}
@media (min-width: 768px) {
.card-grid {
grid-template-columns: repeat(2, minmax(300px, 1fr));
}
}
@media (min-width: 1024px) {
.card-grid {
grid-template-columns: repeat(3, minmax(300px, 1fr));
}
}
真正难的不是写几行类名，而是理解 Grid 的隐式网格线怎么和响应式断点交互——尤其是当内容高度不一致、又用了 col-span- 时，某一行的基线会被拉高，影响后续行的对齐。这时候得靠 align-content-start 或显式设置 grid-auto-rows，而不是反复调 mt-。 
