I am working on creating a responsive grid layout with a specific breakpoint that should reduce the number of columns to 14. Here is the code snippet I have in my Sass file:
#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;
}
}
Despite setting the number of columns to 14 on the specified breakpoint, when I check with the browser's grid inspector after resizing the screen, there are still a total of 16 columns showing up. Can anyone help me identify what I might be missing in my code?