Изменение количества столбцов в сетке CSS с помощью медиа-запроса ⇐ CSS

[Anonymous]

Я пытаюсь создать адаптивную сетку. Я бы хотел, чтобы количество столбцов уменьшилось до 14 в определенной точке останова. У меня есть файл Sass ниже:

#app { --mid-col-size: 60 пикселей; --mid-col-amount: 12; --edge-col: 150 пикселей; --col-gap: 20 пикселей; --edge-проставки: 1fr; дисплей: сетка; строки шаблона сетки: $header-height 1fr $footer-height; столбцы-шаблона сетки: var(--edge-spacers) вар (--edge-col) повтор (var (--mid-col-amount), var (--mid-col-size)) вар (--edge-col) вар (--edge-спейсеры); сетка-столбец-зазор: 20 пикселей; разрыв строки сетки: 0 пикселей; } @media only screen и (max-width: $desktop) { #приложение { --mid-col-size: 1fr --mid-col-amount: 10; --edge-col: 120 пикселей; --col-gap: 10 пикселей; --edge-spacers: 0px; } } Однако при изменении размера экрана, если я посмотрю с помощью инспектора grid браузера, всего останется 16 столбцов – чего мне не хватает?