通过媒体查询更改 CSS 网格中的列数

Question

我正在尝试制作一个响应式网格。我希望在某个断点处列数降至 14。我的 Sass 文件中有以下内容：

#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: 20px;
  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;
  }
}

但是，在调整屏幕大小时，如果我用浏览器

grid

检查器查看，总共仍然有 16 列 - 我错过了什么？

Answer 1

如果我没记错的话 -

Sass

不允许这样的功能。

您也应该在媒体查询中重写这部分

#app

样式：

#app {
  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);
}