用@media控制grid-template-columns实现两栏变单栏，桌面端设为1fr 300px或repeat(2,1fr)，移动端在max-width:768px下改为1fr；需确保父容器有display:grid，避免grid-template-areas覆盖，并用grid-template-areas或grid-row调整顺序。
怎么用 @media 控制 grid-template-columns 实现两栏变单栏
直接改 grid-template-columns 的值就行，不需要额外 wrapper 或 JS。关键在断点选择和列定义方式。
- 桌面端写成
grid-template-columns: 1fr 300px（主内容弹性 + 侧边固定宽）或repeat(2, 1fr)（等宽两栏） - 移动端用
@media (max-width: 768px)把它改成grid-template-columns: 1fr - 注意：不要用
min-width反向写，容易和设计稿断点对不上；优先按「内容撑开」逻辑选断点，比如侧边栏开始叠不下的宽度
grid-template-columns 在媒体查询里为什么有时不生效
常见原因是父容器没设 display: grid，或者被其他 CSS 覆盖了。Grid 属性必须成对出现才能起作用。
- 确认父元素有
display: grid，且该声明没被!important或更具体的选择器覆盖 - 检查是否误写了
grid-template-rows却忘了columns，浏览器不会报错但也不生效 - 如果用了
grid-template-areas，它会覆盖grid-template-columns，此时要同步更新grid-template-areas里的布局定义
两栏变单栏时，如何让原来右侧的区域移到顶部或底部
光改 grid-template-columns 只能控制列数，顺序还得靠 grid-row 或 grid-area 显式指定。
/* 桌面：两栏并排 */
.container {
display: grid;
grid-template-columns: 1fr 300px;
grid-template-areas: "main sidebar";
}
<p>.main { grid-area: main; }
.sidebar { grid-area: sidebar; }</p><p>/<em> 移动端：单列，sidebar 放底部 </em>/
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
grid-template-areas:
"main"
"sidebar";
}
}- 用
grid-template-areas是最直观的方式，语义清晰、顺序可控 - 不想改 HTML 结构时，也可以给
.sidebar加grid-row: 2;，但前提是容器没定义grid-template-areas，否则会被忽略 - 避免用
order，它只影响视觉顺序，语义流和可访问性仍按 HTML 原顺序
要不要加 grid-gap？加在哪一层
grid-gap（或 gap）建议写在容器上，而不是子项里。它只在网格容器生效，且会自动适配单列/双列结构。
立即学习“前端免费学习笔记（深入）”；
- 写在
.container上即可：gap: 1rem，不用在媒体查询里重复写 - 如果某些子项需要更大间距，用
margin更稳妥，避免和gap叠加出意外空白 - IE 不支持
gap，如果还要兼容，得用grid-column-gap+grid-row-gap，但现代项目基本可忽略
响应式 Grid 最容易卡住的地方不是语法，而是没想清楚「哪些区域必须保持语义顺序」「哪些可以靠 grid-area 重排」。先画个草图标好主次区域，再写 CSS，比反复调 fr 值快得多。
