Grid响应式核心是用媒体查询动态重构网格骨架，而非仅调整间距；通过fr实现弹性分配剩余空间，auto保持内容固有尺寸，二者混用兼顾灵活性与完整性。
Grid网格布局实现响应式，核心不是“换一套网格”，而是用媒体查询动态调整 grid-template-columns 和 grid-template-rows 中的 fr 与 auto 组合，让网格轨道根据视口自然伸缩、重排或隐藏。
用 fr 控制弹性分配，auto 保持内容固有尺寸
fr 是 Grid 独有的弹性单位，代表“剩余可用空间的份数”；auto 则让轨道收缩包裹内容（类似 min-content），不强行拉伸。二者混用可兼顾灵活性与内容完整性。
- 例如：三栏布局在桌面端写成
grid-template-columns: 1fr 3fr 1fr，侧边栏等宽，主内容占三份； - 在小屏下改用
grid-template-columns: auto 1fr，把左侧导航设为auto（刚好容下图标+文字），主区用1fr填满剩余宽度； - 更小屏可切为单列：
grid-template-columns: 1fr，所有项目垂直堆叠，此时auto可用于行高或某些固定高度区域（如grid-template-rows: auto 1fr auto控制页眉/主体/页脚）。
媒体查询中重定义 grid-template，而非仅调间距
别只改 gap 或 padding —— 响应式 Grid 的关键动作是重写网格结构本身。用 @media 覆盖整个 grid-template-* 声明，让布局逻辑真正切换。
- 桌面端（≥1024px）：
.layout { display: grid; grid-template-columns: 200px 1fr 300px; } - 平板（768px–1023px）：
@media (max-width: 1023px) { .layout { grid-template-columns: auto 1fr; grid-template-areas: "aside main"; } } - 手机（≤767px）：
@media (max-width: 767px) { .layout { grid-template-columns: 1fr; grid-template-areas: "main" "aside"; } }
结合 grid-area 与 media query 实现区域重排
当用 grid-area 命名区域时，媒体查询里只需重写 grid-template-areas，视觉顺序和 DOM 顺序即可分离。这是比单纯调列数更强大的响应式手段。
- 默认定义：
grid-template-areas: "header header" "nav main" "footer footer"; - 小屏下改为：
@media (max-width: 600px) { grid-template-areas: "header" "main" "nav" "footer"; } - 注意：每个
grid-area名称必须在对应grid-template-areas中出现且连续，否则会留空或错位。
慎用 minmax() + auto-fit/auto-fill 配合 fr
想让列数随容器自适应？repeat(auto-fit, minmax(280px, 1fr))) 是常用组合，但需理解它和纯 fr 的区别：
auto-fit会折叠空轨道，auto-fill则保留（即使为空）；- 括号内
minmax(280px, 1fr)表示：每列至少 280px，最多分得等份的 1fr； - 若希望小屏强制单列，仍需媒体查询兜底：
@media (max-width: 500px) { grid-template-columns: 1fr; }—— 因为auto-fit不会主动减少到 1 列以下。
基本上就这些。Grid 响应式不靠“适配”，而靠“重构”——用媒体查询切换不同语义的网格骨架，fr 负责弹性伸缩，auto 守住内容边界，两者配合才真正灵活。
