最直接响应式网格方案是用 grid-template-columns 配合 @media 按断点写死列数：移动端 1fr、平板 repeat(2,1fr)、桌面端 repeat(4,1fr)；避免 fr 硬撑或 auto-fit/minmax 不可控陷阱。
用 grid-template-columns 配合 @media 切换列数最直接
响应式网格本质是“不同屏幕宽度下，每行显示几列”。grid-template-columns 控制列数，@media 控制触发条件，两者配合就是最轻量、最可控的方式。
常见错误是试图用 fr 单位硬撑所有尺寸，结果小屏上内容被过度压缩或换行错乱。正确做法是明确断点，为每个区间写死列结构。
- 移动端（
max-width: 767px）：设为1fr，强制单列 -
平板（
768px - 1023px）：用repeat(2, 1fr) - 桌面端（
min-width: 1024px）：用repeat(4, 1fr)或按需调整
.grid {
display: grid;
gap: 1rem;
}
@media (max-width: 767px) {
.grid {
grid-template-columns: 1fr;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(4, 1fr);
}
}
minmax() + auto-fit 能自动适配但有陷阱
这个组合看似“智能”，实际在真实项目中容易失控——它依赖容器宽度和子项最小尺寸推算列数，但浏览器计算时不会考虑文字折行、图片缩放或 padding 导致的可用空间变化。
典型问题：小屏下本该显示 1 列，却因某张图没设 max-width: 100%，导致整行宽度超限，auto-fit 错误地维持 2 列并溢出容器。
立即学习“前端免费学习笔记（深入）”；
- 必须给所有直接子项设置
min-width: 0，否则 flex/grid 默认的min-width: auto会干扰计算 -
minmax(300px, 1fr)中的300px是硬性下限，若容器宽仅 280px，就会退化为 0 列（空白） - 不推荐在含表单、卡片带固定图标或头像的布局中使用，约束太弱
.grid-auto {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
}
.grid-auto > * {
min-width: 0; /* 关键！ */
}别用 grid-column 做响应式重排，改用 grid-template-areas
想让某个区块在桌面端居右、移动端置顶？很多人第一反应是写两套 grid-column，但这样要重复写很多媒体查询，且语义混乱。更清晰的做法是用 grid-template-areas 定义区域名，再通过 @media 重排区域顺序。
优势是结构意图一目了然，维护时只需改区域定义，不用动 HTML 或大量位置属性。
- 区域名必须用引号包裹，如
"header header" - 每个
@media块内需完整重写grid-template-areas，不能只覆盖某一行 - 区域名不支持变量或表达式，别想着动态拼接
.layout {
display: grid;
grid-template-areas:
"header header"
"main sidebar";
grid-template-rows: auto 1fr;
}
@media (max-width: 767px) {
.layout {
grid-template-areas:
"header"
"sidebar"
"main";
}
}兼容性底线：IE 不支持 grid，别指望降级成 float
如果项目还需支持 IE11，display: grid 必须放弃。此时用 display: flex + flex-wrap 是唯一可行替代，但要注意：
-
flex无法实现二维对齐（比如同时控制行列间距），gap在旧版 Flex 中也不被支持 - 必须手动给子项加
flex-basis模拟列宽，例如flex: 0 0 calc(50% - 0.5rem) - 媒体查询里改
flex-direction从row到column很容易，但列数切换需要精确计算flex-basis，稍有误差就错位
真正复杂的响应式网格，在 IE 环境下建议直接用 CSS-in-JS 或服务端渲染两套模板，硬靠纯 CSS 降级只会越调越乱。
