baseguide 的 container 类未居中是因为仅设 margin: 0 auto 而未设 max-width，需手动添加如 max-width: 1200px；栅格错位源于父容器缺失 display: grid 和 grid-cols-12；旧版 safari 兼容需用 -webkit-gap、静态 grid-template-columns 替代 grid-cols-* 及移除 clamp()。
Baseguide 的 container 类为什么没居中？
它默认不设 max-width，只提供流式栅格基础，不是 Bootstrap 那种开箱即用的“容器”。你得自己加限制才看得出居中效果。
常见错误是直接套用 <div class="container"> 就以为万事大吉，结果页面内容贴着左边缘——因为 Baseguide 的 <code>container 只含 margin: 0 auto，没配 max-width。
- 必须手动指定
max-width，比如.container { max-width: 1200px; } - 响应式写法推荐用
max-width+width: 100%组合，避免小屏下溢出 - 别依赖 Baseguide 自带媒体查询：它只提供
sm/md/lg断点变量（如--breakpoint-md），具体断点值要你自己在 CSS 中写
用 grid-row 和 grid-col 布局时元素错位
Baseguide 的栅格系统基于 CSS Grid，但默认未设 grid-template-areas 或隐式轨道，错位往往源于父容器缺少 display: grid 或列定义缺失。
典型现象：子元素堆成一列、宽度异常、grid-col-6 没占半宽。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须显式声明
display: grid，Baseguide 不自动帮你加 - 必须配合
grid-cols-12（或自定义列数）类来定义列轨道，否则grid-col-6无效 -
grid-row是辅助类，仅控制grid-row-start，不能单独撑起行布局；需要和grid-row-span或显式grid-template-rows配合 - 注意 margin/padding 干扰：Baseguide 的
gap类用的是gap属性，老版 Safari 需要-webkit-gap补丁
如何让 Baseguide 在旧版 Safari（iOS 14.5 以下）正常工作？
它重度依赖 CSS Custom Properties 和 gap，而这些在旧 Safari 中支持不完整，不是加个 polyfill 就能解决的。
错误做法是直接引入 css-vars-ponyfill，它无法修复 Grid gap 或 minmax() 解析失败的问题。
- 关键兼容补丁只有两个：
display: -ms-grid（IE11 专用，Baseguide 本身已放弃 IE 支持）和-webkit-gap - 对 iOS 14.4 及更早版本，必须重写所有
grid-cols-*为grid-template-columns: repeat(12, 1fr)等静态值 - 删掉所有用到
clamp()的响应式字号（Baseguide 文档里示例用了，但 iOS 14.4 不支持） - 如果项目必须覆盖这些旧设备，建议把 Baseguide 当作“增强层”，核心布局仍用 Flexbox 回退
Baseguide 的轻量是真轻量，但代价是几乎所有布局行为都依赖你对 CSS Grid 的掌控力。它不封装逻辑，也不猜你想做什么——写错一个 display 值，整个栅格就静默失效。
