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

问题描述 投票:0回答:1

我正在尝试制作一个响应式网格。我希望在某个断点处列数降至 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 列 - 我错过了什么?

css css-grid
1个回答
0
投票

如果我没记错的话 -

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);
}
© www.soinside.com 2019 - 2024. All rights reserved.