Grid of cards from 4 to 3 on mobile devices?

Question

I need to transform my grid of cards, so on mobile devices it only fits 3 in the width of the mobile device, but 4 on desktop and tablets.

Right now I have this:

But won't resize properly so I cannot make the screen narrower (to a mobile device size):

CodePen:

https://codepen.io/ogonzales/pen/abNQXLg

HTML Code:


     Just spacing


    

        
            
                
            
                    
                        
                            
                                
                            
                            
                                

                                WR : 50%
                                PR : 50%
                            
                        
                    
          
                        
                            
                                
                            
                            
                                

                                WR : 50%
                                PR : 50%
                            
                        
                    

                        
                            
                                
                            
                            
                                

                                WR : 50%
                                PR : 50%
                            
                        
                    
          
                        
                            
                                
                            
                            
                                

                                WR : 50%
                                PR : 50%
                            
                        
                    
          
                        
                            
                                
                            
                            
                                

                                WR : 50%
                                PR : 50%
                            
                        
                    
          
                        
                            
                                
                            
                            
                                

                                WR : 50%
                                PR : 50%
                            
                        
                    
          
                        
                            
                                
                            
                            
                                

                                WR : 50%
                                PR : 50%
                            
                        
                    
          
                        
                            
                                
                            
                            
                                

                                WR : 50%
                                PR : 50%
                            
                        
                    
          
                        
                            
                                
                            
                            
                                

                                WR : 50%
                                PR : 50%
                            
                        
                    
          
                        
                            
                                
                            
                            
                                

                                WR : 50%
                                PR : 50%
                            
                        
                    
          
                        
                            
                                
                            
                            
                                

                                WR : 50%
                                PR : 50%
                            
                        
                    
          
                        
                            
                                
                            
                            
                                

                                WR : 50%
                                PR : 50%
                            
                        
                    
          
                    
                
            
        

    
    
        
            
                
                
                    
                    
                    
                    
                
                
            
        
        
            
                
                
                    Default radio
                
            
        
        
            
                
                
                    Second default radio
                
            
        
        
            
                
                
                    Disabled radio

UPDATE 1:

Using suggested media queries, don't work:

Code edited:

 /* Tablets */
@media(max-width: 768px) {
  .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    align-items: center;
    grid-gap: 15px;
  }
}

/* Mobile  */
@media(max-width: 500px) {
  .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    align-items: center;
    grid-gap: 15px;
  }
}

user_14387143 · Answer

try using media queries to achieve your desired result.


@media(max-width: 768px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  } 
}


@media(max-width: 500px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  } 
}

This is how your final CSS should look

   .grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     justify-items: center;
     align-items: center;
     grid-gap: 15px;
    }

   .flip-card {
     border-style: hidden;
     background-color: transparent;
     width: 120px;
     height: 120px;
    perspective: 1000px;
   }

   .flip-card-inner {
     position: relative;
     width: 100%;
     height: 100%;
     text-align: center;
     transition: transform 0.6s;
     transform-style: preserve-3d;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   }

    .flip-card:hover .flip-card-inner {
     transform: rotateY(180deg);
   }

   .flip-card-front,
   .flip-card-back {
     position: absolute;
     width: 100%;
     height: 100%;
     backface-visibility: hidden;
    }

    .flip-card-front {
     background-color: #bbb;
     color: black;
   }

   .flip-card-back {
     background-color: #222e36ef;
     color: white;
     transform: rotateY(180deg);
   }

 @media(max-width: 768px) {
   .grid {
     grid-template-columns: repeat(3, 1fr);
   } 
 }

 @media(max-width: 500px) {
   .grid {
    grid-template-columns: repeat(3, 1fr);
   } 
 }

user_3943632 · Answer

Remove the comment in above answer should work.

https://jsfiddle.net/68cwt19m/

@media(max-width: 768px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  } 
}

Grid of cards from 4 to 3 on mobile devices?

2 Answers