Flex-wrap不适合做响应式栅格，因其是一维布局，换行仅按“能放下就放”，无法保证每行列数一致，易因高度不一、动态内容等导致错位、留白、列宽不均，且gap兼容性差、维护成本高。
为什么不用 flex-wrap 做响应式栅格
flex-wrap 不是二维布局，它只按“能放下就放”换行，不保证每行列数一致。图片高度不一、文字行高变化、动态加载内容时，极易出现视觉错位、最后一行留白、列宽不均。
常见错误现象：flex: 0 0 25% 写死宽度后，子项内容撑高导致相邻行基线偏移；gap 在 Safari 旧版和 IE11 中不支持，靠负 margin 修正又易引发外边距合并问题。
- 本质缺陷：它是一维流式布局，强行模拟网格会暴露逻辑断层
- 响应式成本高：要实现“最小宽度 + 自动填满”，往往得用 JS 测容器宽度再切换 class
- 维护负担重：每加一个断点，就得补一组 media query + class 组合
grid-template-columns: repeat(auto-fit, minmax()) 怎么写才有效
这行声明是现代响应式栅格的起点，不是炫技语法，而是浏览器自动计算列数的可靠机制。
关键参数含义：minmax(280px, 1fr) 表示每列最小 280px，最大均分剩余空间；auto-fit 让浏览器丢弃空轨道（即不显示没内容的列），auto-fill 则保留空轨道——绝大多数场景用 auto-fit。
立即学习“前端免费学习笔记（深入）”；
- 不要写死
repeat(12, 1fr)—— 它适合固定列数场景，但无法响应容器缩放 - 避免混用
px和fr：比如200px 1fr 1fr会破坏比例语义，列宽不可预测 - 列宽阈值设多少？280px 是移动端单列安全宽度；若内容更窄，可降到 220px，但低于 200px 易触发小屏挤叠
子元素怎么“占 N 列”而不翻车
Grid 的跨列逻辑干净直接，但容易被传统思维带偏：不需要 col-4 这类 class，也不该设 width。
正确做法全靠 grid-column 控制位置与跨度：grid-column: span 4 表示从当前位置向右跨越 4 条网格线（即占 4 列）；grid-column: 2 / 7 表示从第 2 线开始、到第 7 线结束（占 5 列）。
- 父容器若为
repeat(12, 1fr)，那么span 6就是半宽，span 12就是满宽——无需查表换算 - 绝对禁止给子项设
width或margin：它们会与grid-column冲突，导致溢出或错位 - 间隙统一用
gap：它不触发 margin collapse，且行列间距一步到位；额外加margin会让实际间距变成gap + margin，尤其在换行时易顶出容器
语义化结构怎么跟 Grid 配合不打架
Grid 是布局工具，HTML 标签才是语义载体。二者不该混为一谈：别用 <div class="row"> 模拟结构，而要用 <header>、<main>、<aside> 等标签表达内容角色。
推荐组合方式：display: grid 放在语义容器上（如 <main>），再用 grid-template-areas 命名区域，子元素通过 grid-area 对应归位。这样 DOM 顺序清晰，屏幕阅读器能按逻辑读取，CSS 只管呈现。
- 小屏重排时，别删
<aside>，改用@media调整grid-template-areas，让它从右侧移到主内容下方 - 避免为了“看起来像栅格”而打乱标题层级，
<h1>到<h6>必须保持语义连贯 - 如果必须兼容旧环境（如仍需支持 IE），
gap可退化为padding+box-sizing: border-box，但不要因此放弃 Grid 整体结构
col- 类更轻量。 
