css grid 的 `grid-template-columns` 必须定义在容器（如 `footer`）上，而非子元素；将该属性误置于 `footer div` 会导致失效，正确做法是在 `display: grid` 的父容器中设置列结构。
在使用 CSS Grid 布局时，一个常见但极易被忽略的误区是：网格容器（grid container）与网格项（grid items）的职责必须严格区分。display: grid 只作用于容器元素（此处为
在原始代码中，开发者错误地将 grid-template-columns: auto auto auto auto 写在了 footer div 选择器下：
footer div {
border: solid 2px #fff;
grid-template-columns: auto auto auto auto; /* ❌ 无效：div 不是 grid 容器 */
}
由于
元素默认不是网格容器（未设置 display: grid），该声明完全被浏览器忽略，自然无法形成列布局。
✅ 正确写法是将 grid-template-columns 移至 footer 规则中，并配合 display: grid 显式声明其为容器：
立即学习“前端免费学习笔记（深入）”；
footer {
background-color: #000861;
color: #fff;
padding: 20px 10px;
display: grid;
gap: 10px; /* 推荐使用现代 gap 属性替代已废弃的 grid-gap */
grid-template-columns: repeat(4, 1fr); /* 创建 4 个等宽列 */
}
其中 repeat(4, 1fr) 表示“重复 4 次 1fr”，即让 4 列均分可用空间。你也可以根据需求灵活替换，例如：
- 150px 1fr 2fr 150px → 固定-弹性-双倍弹性-固定
- repeat(auto-fit, minmax(200px, 1fr))) → 响应式自适应列（推荐用于未知数量子项）
同时，子元素（footer div）只需保持默认行为即可，无需额外网格声明：
footer div {
border: solid 2px #fff;
/* 不需要 display: grid 或 grid-* 属性 */
}
⚠️ 注意事项：
- grid-template-columns 对非 display: grid / display: inline-grid 元素无效；
- 子元素若需独立网格布局，必须单独设置 display: grid，但这会创建嵌套网格，而非控制父容器的列数；
- 使用 gap 而非 grid-gap（后者已过时，尽管多数浏览器仍支持）；
- 若子元素数量不是 4 的倍数，Grid 会自动换行填充（取决于 grid-auto-flow 默认值 row）。
总结：Grid 布局的核心逻辑是「容器定义结构，子项负责内容」。牢记这一点，就能避免绝大多数初学者踩坑。