小屏幕下用 max-width 媒体查询将 grid-template-columns 覆盖为 1fr 实现单列堆叠，需同步重置 grid-column: auto、grid-auto-rows 和 gap，避免显式定位残留与间距叠加问题。
小屏幕下用 @media 切换 grid-template-columns 为 1fr
直接把多列网格变成单列堆叠，是最常见也最有效的响应式方案。关键不是“加媒体查询”，而是让 grid-template-columns 在断点处重写为单列值。
- 默认（大屏）设为
grid-template-columns: repeat(3, 1fr)或具体像素值 - 在小屏媒体查询里覆盖为
grid-template-columns: 1fr，不是auto或minmax()—— 后两者可能仍触发多列行为 - 注意：不要只改
grid-template-columns，如果子项有grid-column或grid-row显式声明，它们会继续生效，导致错位；小屏下建议用grid-column: auto重置
@media 断点选 max-width 还是 min-width？
推荐统一用 max-width，从移动端优先出发。这样基础样式写小屏（单列），再用 @media (max-width: 768px) 包住小屏规则，@media (min-width: 769px) 写桌面规则反而容易漏掉边界情况。
- 常见错误：写成
@media (max-width: 768px) { ... }却忘了给父容器设display: grid—— 媒体查询不会自动启用 Grid 布局 - 更稳妥的做法是：基础样式就设
display: grid和单列，再在桌面断点里覆盖列数和间距 - 断点数值别硬编码，用 CSS 自定义属性（如
--breakpoint-md: 769px）方便后续维护
为什么堆叠后元素高度不一致、留白难控制？
单列模式下，grid-auto-rows 和 gap 的行为容易被忽略。默认 grid-auto-rows 是 auto，子项高度由内容撑开，但若内容高度差异大，视觉上就会“参差”。
- 加
grid-auto-rows: minmax(100px, auto)给最小高度兜底，避免过矮 - 慎用
grid-auto-flow: dense—— 它会让网格项重排填充空隙，在单列下可能打乱 DOM 顺序 -
gap在单列时只影响垂直间距，但若子项内有margin-bottom，会和gap叠加，造成双倍空白；建议统一用gap控制间距，子项内部清空 margin
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
<p>@media (min-width: 769px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
}</p><p>.grid > * {
grid-column: auto;
}小屏幕堆叠看似简单，真正卡住人的往往是子项的显式网格定位残留、gap 与 margin 的叠加、以及忘记重置 grid-auto-rows 导致高度失控。
立即学习“前端免费学习笔记（深入）”；
