CSS Grid布局grid-area响应式效果不符合预期，768px仍显示多余区块

问题原因 #

• 你仅在媒体查询中修改了.App的grid-template-columns和grid-template-areas配置，没有对不需要在小屏展示的sidebar、leftmenu、rightmenu三个元素做隐藏处理。
• CSS Grid存在隐式网格规则：没有被显式纳入grid-template-areas的网格子元素，会被自动排列到隐式生成的网格行/列中，不会自动消失，因此这三个区块依然会在页面中渲染，你看到的rightmenu就是隐式网格中的内容。

修复方案 #

最简单的修复方式是在媒体查询中直接隐藏不需要显示的三个区块，修改后的媒体查询代码如下：

@media screen and (max-width: 768px) {
  .App {
    grid-template-columns: 1fr;
    grid-template-areas:
      'nav'
      'content';
  }
  /* 隐藏小屏不需要展示的区块 */
  .sidebar, .leftmenu, .rightmenu {
    display: none;
  }
}

如果不想用display: none，也可以通过配置隐式网格属性实现：

@media screen and (max-width: 768px) {
  .App {
    grid-template-columns: 1fr;
    grid-template-areas:
      'nav'
      'content';
    /* 把隐式网格行高设为0，同时隐藏溢出内容 */
    grid-auto-rows: 0;
    overflow: hidden;
  }
}

内容的提问来源于stack exchange，提问作者user2024080