通过媒体查询调整CSS Grid列数失效问题排查

核心原因：CSS变量声明缺失分号 #

你在媒体查询中的--mid-col-size: 1fr末尾漏掉了分号，这会导致后续所有CSS变量声明失效，浏览器依然沿用初始的--mid-col-amount: 12。初始布局总列数为：1（edge-spacers）+1（edge-col）+12（mid）+1（edge-col）+1（edge-spacers）=16，所以断点处列数没有变化。

额外优化：间隙属性未关联变量 #

你定义了--col-gap变量，但grid-column-gap直接写死为20px，媒体查询中的间隙修改不会生效，建议同步改为使用变量。

修正后的完整代码 #

#app {
  --mid-col-size: 60px;
  --mid-col-amount: 12;
  --edge-col: 150px;
  --col-gap: 20px;
  --edge-spacers: 1fr;
  display: grid;
  grid-template-rows: $header-height 1fr $footer-height;
  grid-template-columns: 
    var(--edge-spacers) 
    var(--edge-col) 
    repeat(var(--mid-col-amount), var(--mid-col-size))
    var(--edge-col) 
    var(--edge-spacers);
  grid-column-gap: var(--col-gap); // 改为使用变量
  grid-row-gap: 0px;
}

@media only screen and (max-width: $desktop) {
  #app {
    --mid-col-size: 1fr; // 补上缺失的分号
    --mid-col-amount: 10;
    --edge-col: 120px;
    --col-gap: 10px;
    --edge-spacers: 0px;
  }
}

修正后，断点处总列数会变为0（edge-spacers）+1（edge-col）+10（mid）+1（edge-col）+0（edge-spacers）=12，若你需要14列，可将媒体查询中的--mid-col-amount调整为12即可。

内容的提问来源于stack exchange，提问作者DanB-Web