用grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))实现列数自适应，配合gap和align-items: start解决错位；媒体查询仅用于大断点（如小屏单列）；ie11用@supports降级为flex布局。
Grid列数怎么随屏幕变，而不是靠JS重排
用 grid-template-columns 配合 repeat() + minmax() + auto-fit 就能纯CSS响应，不用监听窗口或写JS逻辑。核心是让Grid自己算“最多能塞几列”，而不是写死 repeat(3, 1fr) 这种固定值。
-
minmax(300px, 1fr)表示每列最小300px、剩余空间均分——这是响应起点，不是断点 -
auto-fit（不是auto-fill）会让空列自动收缩消失，避免留白 - 搭配
gap控制间距，别用margin，否则会破坏Grid轨道计算
媒体查询还用不用？用在哪
媒体查询没淘汰，但它该退居二线：只管大范围断点（比如手机竖屏强制单列），不负责微调列数。Grid的 auto-fit 已经处理了大部分连续缩放场景，再叠一层媒体查询反而容易冲突。
- 小屏（
max-width: 480px）：直接设grid-template-columns: 1fr，确保卡片垂直堆叠 - 中屏（
min-width: 768px）：启用repeat(auto-fit, minmax(280px, 1fr))) - 别在媒体查询里写
repeat(2, 1fr)——这和Grid自动计算能力背道而驰，且在平板横屏等中间尺寸会卡死
卡片高度不一致时，怎么避免网格错位
默认情况下，Grid按行对齐，某张卡片内容多导致行高拉伸，下一行就会从这个新高度起始，看起来像“阶梯状”。这不是bug，是Grid的正常行为，但视觉上难看。
- 加
align-items: start让所有卡片顶部对齐，比默认的stretch更可控 - 如果必须等高，用
align-content: stretch+ 统一设置min-height，但小心移动端内容被撑空 - 慎用
grid-auto-rows: minmax(200px, auto)——它只影响隐式行，对显式定义的列数无感，且可能和auto-fit产生意外交互
IE11兼容不了，有没有轻量降级方案
IE11不支持 auto-fit 和 minmax()，但强行上Flex降级太重。更实际的做法是：用 @supports 隔离Grid代码，让老浏览器回退到基础流式布局。
- 先写Flex fallback：
display: flex; flex-wrap: wrap;+flex-basis: calc(50% - 8px)（配gap模拟） - 再用
@supports (display: grid)包住Grid规则，IE11直接跳过 - 别试图用
grid-column: span 2在IE里模拟列数——没有auto-fit支撑，维护成本爆炸
真正麻烦的是内容溢出和文字截断在不同引擎下的表现差异，这点Grid没帮你解决，得靠 overflow: hidden 和 line-clamp（配合-webkit前缀）手动兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
