CSS响应式Grid布局失效：窄屏内容无法移至菜单下方

你的问题出在Grid布局的列定义上：当前写法里第一列是固定的15rem，第二列是minmax(30ch, 1fr)，当视口宽度小于15rem + 30ch时，总列宽会超过视口，Grid不会自动将列换行，导致内容区溢出。

修改后的CSS代码（媒体查询方案） #

用媒体查询明确控制响应式布局，在小屏幕时切换为单列：

body {
  display: grid;
  grid-template-columns: 15rem 1fr; /* 宽屏时双列，导航固定15rem，内容占剩余宽度 */
  gap: 0;
  margin: 0 auto; /* 修正margin写法，实现水平居中 */
}

/* 当视口宽度不足以容纳双列时，切换为单列布局 */
@media (max-width: calc(15rem + 30ch)) {
  body {
    grid-template-columns: 1fr; /* 单列，导航和内容垂直排列 */
  }
}

另一种无媒体查询的简洁写法 #

利用min()函数让Grid自动适配视口：

body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 0;
  margin: 0 auto;
}

这种写法会让导航栏在宽屏时保持15rem宽度，窄屏时占满整个视口宽度，内容区自动移到导航下方。

关键说明 #

• 原代码中repeat(auto-fit, minmax(30ch, 1fr))仅作用于第二列，无法让固定宽度的第一列参与响应式换行；
• 媒体查询方案更精准，能明确控制布局切换的临界点；
• 两种写法都能实现你需要的“窄屏时内容区下移至菜单下方”的效果，可根据需求选择。

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