CSS Grid比Bootstrap更适合移动端，因其无需加载冗余类、不污染HTML结构、无JS开销且原生高效；Bootstrap强制加载全部12列规则和断点类，增加首屏负担与DOM深度。
为什么直接用 CSS Grid 写栅格比引入 Bootstrap 更适合移动端
因为移动端对首屏加载速度、内存占用和 DOM 深度更敏感，而 Bootstrap 的 bootstrap.min.css（gzip 后 25KB）会强制加载全部 12 列规则、.col-lg-* 类、重置样式、伪类钩子（如 [data-bs-toggle]），哪怕你只用一行两列。CSS Grid 不需要任何 class，也不污染 HTML 结构，布局逻辑完全收口在 CSS 中。
常见错误现象：div 套 div 套 div（Bootstrap 的 .container > .row > .col），导致移动端渲染树变深、可访问性下降、JS 框架 diff 成本上升。
- 纯 Grid 方案：一个
section+ 若干article，靠display: grid和grid-template-columns控制分布 - Bootstrap 方案：必须写
<div class="container"><div class="row"><div class="col-6">…</div></div></div>，即使只用 2 列也要带齐所有断点类 - 性能影响：Grid 规则由浏览器原生解析，无运行时 JS 初始化开销；Bootstrap 的
:focus-visible等选择器在低端 Android 上可能触发额外重绘
如何手写一个仅 1.2KB 的移动端优先栅格工具类
不需要框架，几行 CSS 就能覆盖 90% 移动端栅格需求。关键是放弃“12 列均分”思维，改用 minmax() + auto-fit 动态列数，适配不同屏幕宽度。
示例代码（可直接复制进 <style> 或 CSS 文件）：
立即学习“前端免费学习笔记（深入）”；
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr))); gap: 0.75rem; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))); gap: 0.75rem; }
@media (min-width: 768px) {
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
}
容易踩的坑：
-
minmax(140px, 1fr)中的140px是移动端最小可触控区域，低于此值易误点；别写成100px - 不要用
repeat(12, 1fr)模仿 Bootstrap —— 移动端根本不需要 12 列，反而增加计算负担 -
gap推荐用rem单位，避免 viewport 缩放时像素断裂；别用px固定值
Pure.css 的 grids.css 和手写 Grid 哪个更适合轻量项目
Pure.css 的 grids-min.css（gzip 后约 1.8KB）确实比 Bootstrap 轻，但它仍是“类驱动”的旧范式：仍要写 <div class="pure-u-1 pure-u-md-1-2">，HTML 仍被样式逻辑侵入。
对比关键点：
- 手写 Grid：HTML 保持语义纯净，
<ul class="grid-2">即可，类名表达意图而非尺寸 - Pure.css：必须记忆
pure-u-1-2（半宽）、pure-u-md-1-3（中屏三分之一）等命名，学习成本不低 - 兼容性：Pure.css 为兼容 IE8 做了大量 hack，而现代移动端（Chrome/Edge/Safari iOS ≥14.5）已全面支持 Grid，无需降级
- 维护成本：Pure.css 更新需同步 CDN 版本；手写 Grid 可随业务迭代直接改 CSS，无外部依赖
当必须兼容 iOS Safari 12–13 时，Grid 的降级方案怎么写
iOS Safari 12–13 对 gap、subgrid、minmax() 支持不全，但基础 Grid（display: grid + grid-template-columns）是可用的。重点不是“全功能降级”，而是“安全兜底”。
实操建议：
- 用
@supports (display: grid)包裹 Grid 规则，老内核自动跳过 - 对关键布局（如商品列表），同时提供 Flexbox 备选：
display: flex; flex-wrap: wrap;+flex-basis: calc(50% - 0.75rem) - 避免在降级路径中使用
grid-area或grid-row—— 这些在 iOS 12 下行为不可靠 - 测试真实设备：iOS 12.5.7（最后支持 iPhone 5s/6）仍存在
gap渲染偏移问题，此时改用margin模拟间距更稳
真正复杂的是响应式断点组合与内容流重排，而不是 Grid 本身 —— 把精力放在定义清晰的 content-first 结构上，比纠结“该不该用框架”更有实际价值。
