应使用 repeat(auto-fit, minmax(200px, 1fr)) 实现动态列数适配，其中 minmax(200px, 1fr) 约束每列最小宽度与弹性分配，auto-fit 自动合并空列；配合 gap 控制间距，无需媒体查询即可在手机缩为2列、桌面扩展至4–5列。
友情链接用 display: grid 实现等宽平铺时，列数怎么动态适配屏幕？
直接写死 grid-template-columns: repeat(4, 1fr) 在小屏上会挤成一列超长，大屏又留白太多。正确做法是用 minmax() + auto-fit 组合：
.links-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
}
关键点：minmax(200px, 1fr) 表示每列最小 200px、最大均分剩余空间；auto-fit 会自动合并空列，比 auto-fill 更省空间。实测在手机上缩为 2 列、桌面自然撑到 4–5 列，无需媒体查询。
链接文字过长导致换行错位，怎么强制单行截断？
网格项里 <a></a> 默认是 inline 元素，遇到长名称（比如“某某开源项目官方文档站”）会撑开整列，破坏对齐。必须显式控制：
- 给
<a></a>加display: block和overflow: hidden - 用
text-overflow: ellipsis配合white-space: nowrap - 别忘了
max-width: 100%，否则在弹性容器里可能溢出
完整样式片段：
.links-grid a {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
为什么加了 grid-gap 后最后一行左边有空白？
这是 grid 的常见渲染陷阱：当子元素数量不能整除列数时，auto-fit 会把剩余空位“收走”，但 gap 仍按满格计算，造成视觉偏移。解决方法只有两个：
- 用
justify-content: center居中整个网格（适合链接总数较少的场景） - 更稳妥的是加一个伪元素占位：
.links-grid::after { content: ""; grid-column: span 99; }，让浏览器认为最后一行已填满
注意：不要用 margin 负值硬调，响应式下极易失效。
SEO 友好型友情链接 HTML 结构该怎么写？
纯视觉网格容易忽略语义。搜索引擎仍依赖 DOM 顺序理解链接权重，所以结构必须保持线性逻辑：
<div class="links-grid"> <a href="https://a.com" rel="nofollow">站点A</a> <a href="https://b.com" rel="nofollow">站点B</a> <a href="https://c.com" rel="nofollow">站点C</a> <!-- 不要套 div 或 span 包裹 a --> </div>
重点：rel="nofollow" 是必须的（避免权重传递），且所有 <a></a> 必须直接作为 .links-grid 的子元素。嵌套层级增加会导致网格项计算异常，也影响爬虫提取。
真正麻烦的是字体大小和行高在不同设备下的微调——小字号在 Retina 屏上发虚，大字号在窄屏又换行，这个得靠 clamp() 动态控制，不是 grid 本身能解决的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
