Grid using media queries to collapse buttons from 3 to 2 to 1

[htmlcssjavascript28]

code: Edit fiddle - JSFiddle - Code Playground

The buttons are not collapsing from 3 to 2 to 1.

I don’t understand why it is not working.

How do I get it to work?

@media (max-width: 536px) {
  .buttonContainerC {
    grid-template-columns: repeat(2, 183px);
  }
}


@media (max-width: 172px) {
  .buttonContainerC {
    grid-template-columns: repeat(1, 183px);
  }
}


.buttonContainerC {
  display: grid;
  grid-template-columns: repeat(3, 183px);
  /*align-content: center;
  justify-content: center;*/
  align-items: center;
  max-width: 569px;
  gap: 10px;
}

 

[cbreemer]

It's because you have already defined grid-template-columns in your main .buttonContainerC section. That is not goinf to be overwritten by the values in your @media sections.
Remove that line and add this section:

@media (min-width: 536px) {
  .buttonContainerC {
    grid-template-columns: repeat(3, 183px);
  }
}

That should do it.

 

[htmlcssjavascript28]

Fixed: Edit fiddle - JSFiddle - Code Playground

 

[cbreemer]

Why post your fiddle link again ? You want me to check your fix ?

 

[htmlcssjavascript28]

I fixed the code and have it working now.

 

[cbreemer]

It seems you found another solution than the one I proposed. It would be good manners to post the details of your solution.

 

[tomliv]

Here is another solution with one line, no MQs. Adjust width as needed.

Seen in action here:

https://codepen.io/travishorn/pen/RdPLwj

From this article:

Responsive grid in 2 minutes with CSS Grid Layout

Are you trying to build a grid of elements? If so, you’ve probably noticed one size doesn’t fit every screen size. The modern solution is a responsive grid that changes based on the size of the screen viewing it. Many developers jump to a web design ...

travishorn.com

Code:
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));