display: grid 是实现真正响应式多列布局的唯一现代方案，核心用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))) 实现列数自动适配，搭配 gap 控制间距，无需媒体查询；IE11 不支持该语法，需用 @supports 降级为 flex 或单列流式布局。
用 display: grid 实现真正响应式的多列布局
直接上结论：别用 float 或 inline-block 模拟多列，现代浏览器里 display: grid 是唯一靠谱的选择。它原生支持列数自动调整、间隙控制、对齐和重排，而且一行 CSS 就能解决过去要 JS 配合的响应逻辑。
关键不是“怎么写网格”，而是“怎么让它随屏幕变”。核心是 grid-template-columns 配合 minmax() 和 auto-fit —— 这俩组合才是自适应的底层机制。
-
minmax(300px, 1fr)表示每列最小 300px，最大均分剩余空间 -
auto-fit会让空列自动收缩消失，auto-fill则保留空位（常用于卡片预留格） - 搭配
gap控制间距，避免用margin导致最后一行错位
移动端优先的列数断点怎么设才不踩坑
很多人写一堆 @media 手动切列数，结果维护爆炸。其实多数场景根本不需要手动断点 —— grid 自己就能根据容器宽度动态算列数。但有三个容易被忽略的细节：
- 容器必须有明确宽度（比如
width: 100%或max-width），否则minmax失效 - 别在
grid容器上设padding后又忘了用box-sizing: border-box，否则列宽计算会偏差 - 如果内容高度差异大，加
grid-auto-rows: minmax(min-content, max-content)防止某行被拉得过高
示例：
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
width: 100%;
} 在手机上自动变成 1 列，平板 2 列，桌面 3–4 列，全程无 JS、无媒体查询。
IE11 兼容需求下还能用 grid 吗
不能。IE11 的 display: -ms-grid 只支持静态列定义，不支持 auto-fit、minmax() 和响应式重排。如果项目必须兼容 IE11：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 放弃真正的自适应网格，改用
flexbox + flex-wrap模拟（列数靠@media切） - 或者用
display: table-cell（但列宽固定、语义差、无法换行） - 更现实的做法：给 IE11 用户降级为单列流式布局，用
@supports (display: grid)包裹 grid 样式
别试图用 Autoprefixer “修复” IE11 的 grid —— 它补不了语法差异，只会让代码更难 debug。
为什么 grid-column: span 2 在响应式里经常失效
因为 span 是基于当前显式网格轨道数计算的，而 auto-fit 生成的轨道数是动态的。比如桌面下有 4 列，span 2 占一半；缩到手机只剩 1 列时，span 2 就超出范围，浏览器会把它塞进第一列并忽略 span。
解决办法只有两个：
- 用
grid-column: -1让元素横跨到最后一列（需配合grid-auto-flow: dense） - 彻底放弃
span，改用grid-area配合命名区域（适合结构固定的头部/侧栏）
记住：响应式网格里，尽量让所有子项用相同模板列行为，复杂合并留到非响应区域做。
