用 display: grid 配合 repeat(auto-fit, minmax()) 可实现免媒体查询的真正响应式栅格；Flexbox 因属一维布局，无法协同控制行列尺寸，易在卡片高度不一、跨行等场景失效。
直接用 display: grid 配合 repeat(auto-fit, minmax()) 就能实现真正灵活的响应式栅格系统，不需要手写一堆媒体查询断点，也不必依赖框架。
为什么别硬套 Flexbox 做二维栅格
Flexbox 是一维布局工具，flex-wrap 只能“换行”，不能定义列宽与行高之间的协同关系。常见翻车场景包括：
-
flex: 1在嵌套容器里失效，尤其当父容器没设height或min-height: 0 - 卡片高度不一致时，整行被拉伸或塌陷，因为 Flexbox 没有“行对齐”概念
- 想让第 2 行第 3 列的卡片跨两行？得靠
margin或calc()补丁，维护成本陡增
除非你只做单行/单列的线性排列（比如导航栏、横向滚动列表），否则别强行用 Flexbox 模拟栅格。
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))) 怎么工作
这行代码是响应式栅格的核心，它不是魔法，但得理解每个部分的实际含义：
立即学习“前端免费学习笔记（深入）”；
-
minmax(300px, 1fr)：每列最小 300px，最大为“剩余空间均分后的一份”——注意，“剩余空间”是容器宽度减去所有非fr轨道后的值，不是视口宽度 -
auto-fit：只生成有内容的列轨道，并把空轨道收缩掉，再把剩余空间均分给有内容的列；auto-fill则会保留空轨道占位，容易导致小屏上出现不可见的空白列 - 整个
repeat()表达式会在容器宽度变化时自动重算列数，无需 JS 或媒体查询
示例：.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } —— 在 768px 宽度下大概显示 2 列，1200px 下显示 4 列，且每列宽度始终弹性适配。
什么时候必须加媒体查询
自动填充很省事，但有些控制无法靠 minmax() 实现，这时媒体查询仍是必要的：
- 需要在移动端强制堆叠（
grid-template-areas改变区域顺序） - 不同断点下调整
gap或padding，比如小屏减小间距节省空间 - 某些列需固定宽度（如侧边栏），其余用
1fr，此时minmax()会失效，必须用@media切换整个grid-template-columns - 旧版 Safari 或 Android WebView 对
auto-fit支持不稳定，@supports (display: grid)+ 回退到 Flexbox 是稳妥做法
典型写法：@media (max-width: 768px) { .grid { grid-template-columns: 1fr; } }，注意这里覆盖的是整条声明，不是追加。
容易被忽略的细节：子项尺寸与 box-sizing
栅格系统是否稳定，一半取决于容器，另一半取决于子项。以下三点常被跳过：
- 子项不要设固定
width（如width: 300px），否则会顶破minmax()的弹性逻辑 - 图片或文字超长时，需加
min-width: 0或overflow-wrap: break-word，防止撑爆列宽 - 所有子项统一加
box-sizing: border-box，确保padding和border不影响列宽计算
最隐蔽的问题是：父容器没设 max-width，导致大屏下网格无限拉宽，卡片被撑得稀疏无力——记得给容器加 max-width: 1200px 或类似约束。
