首选写法是grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))，它通过自动计算列数、收缩空轨道、保障最小宽度实现真正模块化响应式栅格，无需媒体查询或固定类名。
直接用 display: grid 实现模块化栅格系统，比手写 CSS 类名（如 .col-4）更轻量、语义更清晰，也更容易响应式适配。关键不在“套框架”，而在理解网格容器如何动态分配轨道、如何让子项自动归位。
grid-template-columns 怎么写才真正“模块化”
模块化不是靠一堆固定列宽的 class，而是靠可复用的轨道定义逻辑。常见误区是写死 grid-template-columns: 1fr 1fr 1fr —— 这只能适配三列，加个新模块就崩。
- 用
repeat(auto-fit, minmax(280px, 1fr)))：最小宽度 280px，撑不满时自动合并为一列，撑得下就平分剩余空间，列数随容器宽度自适应 - 避免
auto单独用在列定义里（如auto auto auto），它不收缩也不伸展，容易导致内容溢出或空白塌陷 - 需要固定侧边栏+主内容时，用
250px 1fr或minmax(250px, 250px) 1fr，确保侧边栏不被压缩
子模块怎么“跨列”又不破坏整体栅格流
模块化布局常需某个卡片横跨两列（比如 banner）、某个列表占满整行。硬写 grid-column: 1 / -1 看似简单，但会打断后续元素的自动填充顺序。
- 优先用
grid-column: span 2（跨 2 列），而不是指定起止线，这样不影响其他项的自动流式排列 - 若必须从特定线开始（如第二列起始），配合
grid-auto-flow: row dense，否则空隙可能不被填补 - 慎用
grid-area命名区域——除非整个布局结构稳定不变；否则改一个区域名，所有grid-area引用都要同步更新，维护成本高
gap 和 padding 混用时的常见错位问题
gap 是网格项之间的间隙，但它不作用于容器边缘。很多开发者加了 gap: 20px 后发现第一行/第一列贴边，误以为“栅格没生效”。
- 解决办法很简单：给容器加
padding，值等于gap，视觉上就对齐了 - 不要用
margin替代gap：每个子项单独设margin会导致最后一行/列右侧/底部多出额外空隙 - 如果模块内部也有间距需求（比如卡片内图标和文字），在子项内部用
padding，别把gap当万能间隔工具
真正难的不是写出第一版栅格，而是当产品经理说“这个模块要插在第三和第四之间，还要横跨两列，但下面所有模块保持原顺序”时，你能否只改一行 grid-column 就完成，而不去动 HTML 结构或重写整个 grid-template。这取决于你最初是否把轨道定义和子项定位逻辑解耦清楚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
