HTML本身不提供栅格系统，模块化网页栅格布局实际依赖CSS的display: grid实现，核心是语义化HTML结构配合grid-template-columns（如repeat(auto-fit, minmax(300px, 1fr))）、grid-template-areas区域定义及gap控制间距，且父容器必须显式声明display: grid才能激活网格上下文。
HTML 本身不提供栅格系统，所谓“模块化网页栅格布局”实际靠 CSS 的 display: grid 实现，核心是用语义化 HTML 结构 + 精确可控的 Grid 轨道定义。别在 HTML 标签里硬塞列数或 span 属性——那不是标准做法，也破坏可维护性。
grid-template-columns 怎么写才真正响应式
固定列数（如 repeat(3, 1fr)）在小屏上会挤成窄条，大屏又留白太多。真正在项目中能落地的写法是结合 auto-fit 和 minmax()：
-
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))：每列最小 300px，多出来的空间平均分给所有列；容器变窄时自动减少列数，不换行也不溢出 - 别用
auto-fill替代auto-fit：前者会渲染“看不见的空列”，影响子项:nth-child选择器和动画逻辑 - 如果需要固定 gutter（间隙），优先用
gap，而不是给每个子项加margin——后者会破坏justify-content: stretch的默认行为
如何让 header / sidebar / main / footer 各自占位不打架
靠 grid-template-areas 字符串定义区域，比纯线号定位更直观、易协作：
- 先在容器上写：
grid-template-areas: "header header" "nav main" "footer footer" - 再给子元素设
grid-area: header、grid-area: nav等，名字必须完全一致（包括引号内空格） - 注意：area 名称不能含数字开头（如
"1header"无效），也不能用连字符（"main-content"会报错） - 如果某区域要跨多行，写成
"header header" "header header"即可，不用额外写grid-row
为什么子元素加了 grid-column 还没效果
常见原因不是语法错，而是父容器根本没激活 Grid 上下文：
立即学习“前端免费学习笔记（深入）”；
- 确认父容器设置了
display: grid或display: inline-grid——只设grid-template-columns不生效 - 检查是否被其他样式覆盖：比如父容器同时有
display: flex，它会直接屏蔽 Grid 布局 -
grid-column: 2 / 4表示从第 2 条线开始、到第 4 条线结束（即占第 2、3 两列），不是“从第 2 列到第 4 列” - 若用
grid-area简写，格式必须是grid-area: row-start / column-start / row-end / column-end，漏掉斜杠或顺序错都会静默失效
最常被忽略的是：Grid 容器的 width 或 max-width 没设，导致列轨道计算基于 fit-content，看起来像没生效；还有就是嵌套 Grid 时，内层容器忘了设 display: grid，结果子项全堆在第一格里。
