页脚Grid自适应需用repeat(auto-fit, minmax(250px,1fr))，配grid-auto-rows:1fr；宽高不均时用grid-template-areas与area绑定；Safari旧版需@supports降级为Flex；跨列用grid-column:1/-1而非span。
页脚用 display: grid 布局时，列数不随屏幕变怎么办？
直接写死 grid-template-columns: repeat(4, 1fr) 在小屏上会挤成一列超宽文字，根本不是“自适应”。关键不是列数固定，而是让 Grid 自动计算能放几列——得用 repeat(auto-fit, minmax(...)) 这个组合。
-
minmax(250px, 1fr)表示每列最小 250px、最大均分剩余空间，小屏下撑不开就自动减少列数 -
auto-fit会合并空轨道，auto-fill则保留空位，页脚通常选auto-fit - 别漏写
grid-auto-rows: 1fr，否则多行内容高度不一致（比如有的栏目有 3 行链接，有的只有 1 行）
如何让不同栏目宽度不同，又保持整体响应式？
硬写 grid-template-columns: 2fr 1fr 1fr 1fr 会破坏响应逻辑。正确做法是：主栏目用 minmax(300px, 2fr)，其他辅助栏目用 minmax(180px, 1fr)，再靠 grid-template-areas 控制顺序——这样既保宽度比例，又不卡死列数。
- 例如：
grid-template-areas: "logo links links contact"，小屏时自动折行为 "logo" / "links" / "links" / "contact" - 每个区域用
area名绑定元素：footer__logo { grid-area: logo; } - 注意
grid-area必须和grid-template-areas字符串完全匹配，大小写和空格都不能错
Grid 页脚在 Safari 旧版本里错位或不渲染？
Safari 10.1–12.1 对 auto-fit 和 minmax() 支持不全，会退化成单列。必须加降级方案：
- 用
@supports (display: grid)包裹 Grid 样式，避免老内核解析错误 - 在 Grid 规则前写 Flex 布局作为 fallback：
display: flex; flex-wrap: wrap;，并给子项设flex: 1 1 200px - 测试时打开 Safari 开发者工具 → “实验性功能” → 关掉 “CSS Grid Layout” 看是否回退正常
为什么用 grid-column: span 2 合并列后，小屏下布局乱了？
因为 span 是基于当前网格轨道数计算的，而 auto-fit 下轨道数动态变化。比如大屏有 4 列，span 2 占一半；小屏只剩 2 列，span 2 就占满整行——但若该区块内容少，会拉高整行高度，挤乱其他列。
- 解决方法：对需要跨列的区块单独设
grid-column: -1 / 1（从最后一格到第一格），它始终占满整行，不受轨道数影响 - 或者改用
grid-column: 1 / -1，语义更清晰 - 切记不要在同一个容器里混用
span和1 / -1，容易触发浏览器渲染歧义
实际项目中，最常被忽略的是 minmax() 里的最小值没结合内容真实宽度测——比如写了 minmax(120px, 1fr)，但某列标题字数多，120px 根本塞不下，文本溢出或换行撑高行高，反而破坏对齐。得用浏览器调试器实时拖拽宽度看临界点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
