Question 261758 in CSS Question posted in
Some basic documentation can be found here.

Changing number of columns in a CSS grid via media query

I’m trying to make a responsive grid. I would like the number of columns to drop to 14 on a certain breakpoint. I have the below in a 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;
  }
}

However, on a screen resize, if I look with the browser grid inspector, there are still 16 columns in total – what am I missing?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I was missing a semi-colon after --mid-col-size in the media query - now working as it should.


  2. 0

    If I didn’t wrong – Sass does’nt allow such functionality.

    You should rewrite this part of #app styles also in media query:

    #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);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search