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