直接用 repeat(auto-fit, minmax()) 实现列数自动响应式，无需媒体查询；但需语义化控制（如品牌区整行、链接区固定两列）时，须结合 grid-template-areas 和 @media。
直接用 repeat(auto-fit, minmax()) 就能实现列数随屏幕自动增减，不需要媒体查询硬切；但想控制语义结构（比如“品牌区”必须占整行、“链接区”固定两列），就得配合 grid-template-areas 和 @media。
为什么 justify-content: space-between 在页脚里总没反应
不是写错了，是它根本没机会生效。justify-content 作用对象是列轨道整体，不是子元素；而页脚容器通常设了 width: 100% 和 grid-template-columns: 1fr 1fr 1fr 这类自适应列，结果列总宽刚好等于容器宽——没剩余空间可“分”，属性直接被忽略。
- 用 DevTools 查
computed width，确认容器宽度是否真大于列轨道总和 - 响应式断点下
grid-template-columns变成单列（如1fr），space-between至少需要两个轨道才起作用 - 误把 Grid 当 Flex 用：想靠容器推子项，实际该用
justify-self或grid-column控制单个格子
怎么让列数真正响应式，而不是写死 repeat(3, 1fr)
写死列数在小屏上必然挤成窄条。真正响应式的列数得由浏览器自动算——靠 minmax() 定义每列最小宽度，auto-fit 负责收缩空轨道并拉伸可用列。
- 基础写法：
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))，小屏下自动退为单列，大屏均分 - 列内容高度不一致？补上
grid-auto-rows: 1fr，否则有的区块高、有的矮，视觉割裂 - 最小值不能拍脑袋定：用 DevTools 拖拽容器宽度，观察文字何时开始换行或溢出，取那个临界值作
minmax()的下限 - Safari 10.1–12.1 不支持
auto-fit，需加降级：@supports not (display: grid) { }或回退到 Flex
不同栏目宽度不同，又要响应式，怎么写
别硬写 grid-template-columns: 2fr 1fr 1fr，这会卡死列数。正确解法是语义化区域绑定，用 grid-template-areas 配合带比例的 minmax()。
- 先定义布局模板：
grid-template-areas: "logo links contact social" - 给对应元素加
grid-area: logo、grid-area: links等，名字必须完全匹配（大小写、空格都不能错） - 主栏目（如
links）用minmax(300px, 2fr)，辅助栏目（如contact）用minmax(180px, 1fr) - 跨列区块别用
grid-column: span 2，改用grid-column: 1 / -1，它始终占满整行，不受轨道数影响
最常被忽略的是 minmax() 里的最小值没结合真实内容测——比如写了 minmax(120px, 1fr)，但某栏目图标+文字组合最小安全宽度其实是 220px，结果小屏下文字强制换行或截断。这事得真机拖着看，不能只信设计稿标尺。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
