CSS Grid响应式布局失效 媒体查询不生效如何解决

非响应式页面截图

核心失效原因 #

你的HTML结构没有问题，响应式不生效全部来自CSS的语法和逻辑错误：

• 网格区域定义不完整（核心原因）：你在550px断点下给容器定义了7行网格轨道，但grid-template-areas只写了nav和sidebar两个区域，剩下content1/content2/content3/main/footer五个已经绑定了grid-area属性的元素完全没被纳入网格模板。按照CSS解析规则，只要grid-template-areas存在区域遗漏、单元格空缺、命名不匹配的问题，整个网格模板规则会直接作废，浏览器不会应用媒体查询内的任何网格布局修改。
• 存在语法冗余和缺漏：main选择器内的grid-area: main末尾缺少分号，footer选择器的闭合大括号}后多写了一个多余的分号，这类小问题虽然多数浏览器会做容错处理，但在部分严格解析环境下可能打断后续CSS规则的读取。

修复步骤 #

1. 补全媒体查询内的grid-template-areas声明，让7个网格区域和你定义的7行轨道一一对应，保证网格矩阵完整。
2. 修正CSS语法细节，删除多余分号、补全缺失的分号。

修复后的完整CSS代码如下：

.mainContainer{
    display: grid;
    height: 100vh;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: .2fr 1.5fr 1.2fr .3fr;
    grid-template-areas:
    'nav nav nav nav'
    'sidebar content1 content2 content3'
    'sidebar main main main'
    'footer footer footer footer';
    grid-gap: 0.2rem;
}

nav {
    background-color: #a7ffeb;
    grid-area: nav;
}

main {
    background-color: #84ffff;
    grid-area: main;
}

#sidebar {
    background-color: #18ffff;
    grid-area: sidebar;
}

#content1 {
    background-color: #6fffd2;
    grid-area: content1;
}

#content2 {
    background-color: #6fffd2;
    grid-area: content2;
}

#content3 {
    background-color: #6fffd2;
    grid-area: content3;
}

footer{
     background-color: #1de961;
     grid-area: footer;
}

/* 响应式适配规则 */
@media only screen and (max-width : 550px) {
  .mainContainer {
    grid-template-columns: 1fr;
    grid-template-rows: 0.4fr 0.4fr 1.2fr 1.2fr 1.2fr 2.2fr 1fr;
    grid-template-areas:
      'nav'
      'sidebar'
      'content1'
      'content2'
      'content3'
      'main'
      'footer';
  }
}

效果验证 #

替换代码后，当视口宽度小于等于550px时，布局会自动切换为单列纵向排列，和教程预期效果一致。如果需要调整移动端元素的展示顺序，直接修改grid-template-areas内的区域行顺序即可。

内容的提问来源于stack exchange，提问作者Raffle.ski