现代css grid响应式栅格只需container设grid-template-columns:repeat(12,minmax(0,1fr))，子项用grid-column:span n控制跨列，断点仅改span值；gap控间距，禁用margin；避免grid-template-areas。
">
直接用 grid-template-columns: repeat(12, minmax(0, 1fr)) + grid-column: span N 就能跑通现代浏览器的响应式栅格，不需要预处理器、JS 或冗余类名。关键不是“写全不全”，而是“改一处，所有断点都跟着动”。
grid-column: span N 是核心控制逻辑
Bootstrap 的 col-4 本质就是让元素跨 4 条列线，CSS Grid 原生支持这个行为，无需模拟。
-
grid-column: span 4表示占满连续 4 列，等价于 Bootstrap 的col-4 - 默认子项不用设起始线，
auto / span N足够；显式写grid-column: 1 / -1反而限制了流式排列 - 避免混用
grid-column-start和span—— 浏览器会按规范忽略后者，导致跨列失效 - IE11 不支持
span语法，需用@supports not (grid-column: span 1)降级为float或flex
响应式断点只改 grid-column，别碰 grid-template-columns
很多人误以为要为每个断点重写 repeat()，其实列轨道定义一次就够了，变的是子项跨度。
- 容器统一设
grid-template-columns: repeat(12, minmax(0, 1fr))，它在所有屏幕下都有效 - 移动端默认
.col { grid-column: span 12; }（单列） - 平板加
@media (min-width: 768px) { .col-md-6 { grid-column: span 6; } } - 桌面再加
@media (min-width: 992px) { .col-lg-4 { grid-column: span 4; } } - 注意：不要在媒体查询里重复声明
display: grid或gap，除非真要覆盖
留白必须用 gap，禁用 margin
gap 是 Grid 布局中唯一不影响轨道计算的间距方式；margin 会干扰 span 的列宽分配，尤其在小屏下容易撑破容器。
-
gap: 16px同时控制行距和列距，比分别写row-gap和column-gap更简洁 - 若需不同方向间距，才拆开：
row-gap: 24px; column-gap: 16px - 子项内部有
padding没问题，但别给子项加margin—— 它会让span 4实际占位超过 4 列宽度 - iOS Safari 15.4 以下不支持
gap，可用@supports not (gap: 16px)回退到margin，但此时必须同步调整grid-column值补偿外边距
为什么不用 grid-template-areas 写栅格
grid-template-areas 适合固定区域（如 header / sidebar / main），不适合动态组合的 12 栅格。
- 一行可能有
span 3 + span 9，也可能有span 4 × 3，硬写"a b c" "d e f"会导致类名爆炸 - 每个新布局组合都要新增一个 area 名，维护成本远高于直接改
span值 -
grid-template-areas不支持响应式切换（无法在媒体查询里动态改字符串值） - 真要用语义化命名，可用 CSS 自定义属性替代：
--col-span: 4;→grid-column: span var(--col-span);
真正难的不是写出第一版栅格，而是当设计稿突然要求“在 820px 断点下，第三列变宽 1.5 倍”时，你能否 30 秒内定位并修改——这时候你会发现，把逻辑压进 span 和 gap 里，比堆砌类名或嵌套 media query 稳得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
