用 display: grid + auto-fit + minmax() 可构建轻量稳定响应式栅格；flex-wrap 因一维布局缺陷易致错位、留白、列宽不均，且 gap 兼容性差；grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 自动适配列数，配合 gap 与 box-sizing: border-box 确保精准布局。
直接用 display: grid + auto-fit + minmax() 就能写出轻量、稳定、无需 JS 的响应式栅格系统，比手写 float 或 flex-wrap 更可靠，也比引入 Bootstrap 等整套框架更可控。
为什么不用 flex-wrap 做响应式栅格
flex-wrap 在图片高度不一、动态加载或内容行高变化时，极易出现断行错位、最后一行留白、列宽不均等问题。它本质是一维布局，强行模拟二维网格会暴露逻辑缺陷。
-
flex-wrap: wrap不保证每行元素数量一致，浏览器按“刚好放得下”换行，不是按“列数”对齐 - 子项设
flex: 0 0 25%后，若内容撑高，相邻行的基线可能错开，视觉上列不齐 - 无法天然处理间隙（
gap在 Flex 中兼容性差，IE11 不支持，Safari 旧版有 bug） - 要实现“最小宽度 + 自动填满”，得靠 JS 测容器宽再重算 class，失去 CSS 声明式优势
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 怎么工作
这是现代响应式栅格的核心声明，它让浏览器自动计算列数，而非人工写死断点。
-
minmax(280px, 1fr)：每列至少 280px 宽，剩余空间平分给所有列（1fr） -
repeat(auto-fit, ...)：尽可能多地重复该列定义，但只在能放下整列时才渲染；空间不够就少一列，不会挤变形 - 屏幕缩小时，列数自然从 4→3→2→1，无需写多个
@media规则 - 必须搭配
gap控制间距——它不参与宽度计算，不会破坏列宽逻辑
移动端单列和 IE11 兼容怎么处理
别幻想一套代码通吃所有环境，关键路径要降级明确。
- 小屏强制单列：加一条
@media (max-width: 768px) { .grid { grid-template-columns: 1fr; } }，比依赖 auto-fit 更可控 - IE11 不支持
gap？改用grid-column-gap和grid-row-gap（IE10+ 支持） - IE11 不支持
auto-fit？回退为固定列数：grid-template-columns: repeat(3, 1fr)，再用媒体查询切 2 列/1 列 - 别在 Grid 容器里混用
float或display: inline-block，会触发 BFC 冲突，导致网格塌陷
栅格类名要不要封装成 .col-4 / .col-sm-6 这种
没必要。语义化栅格应由容器驱动，而不是靠一堆类名污染 HTML。
- 把列宽逻辑全写在容器上（如
.card-grid），HTML 保持干净：<div class="card-grid"><div>Item</div></div> - 如果真需要局部控制某项跨列，用
grid-column: span 2，比.col-8更精准且不耦合容器断点 - 类名泛滥（如 .col-md-4 .col-lg-3）意味着你把响应式逻辑拆到了 HTML 层，维护成本指数上升
- 真正难的不是写对一行 CSS，而是统一盒模型：
* { box-sizing: border-box; }必须全局加，否则padding会让minmax()计算失效
最常被忽略的其实是 gap 和 box-sizing 的组合效应——漏掉其中任一个，都会让看似正确的 grid 布局在真实内容中突然错位或溢出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
