Grid Layout not changing when changing screen size, Media Queries CSS-CodePudding

I'm trying to get elements from being in 2 columns to 1 when changing to a smaller screen size using display:grid and Media Query. Furthermore, despite using fr units it doesn't get smaller with the screen size after certain value and it shows horizontal scrolling which I dont want. But I cannot understand why it doesn't work, have already spent several hours looking for helpful information.

*{max-width:100%;}
      #grid {
        display: grid;
        height: 200px;
        grid-template-columns: 1fr 1fr 1fr;
    
      }
    
      #item1 {
        grid-column:2;
        background-color: lime;
      }
    
      #item2 {
        grid-column:2;
        background-color: yellow;
        grid-row: 2;
      }
    
      #item3 {
        grid-column:2;
        background-color: blue;
        grid-row: 3;
      }
    #item4 {
        grid-column:2;
        background-color: green;
        grid-row: 4;
      }
    @media all and(min-width:500px){
        #grid {
          height: 200px;
          grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    
        }
          #item1 {
          grid-column:2;
         
        }
    
        #item2 {
          grid-column:4;
       
        grid-row:1;
        }
    
        #item3 {
          grid-column:2;
   
          grid-row: 3;
        }
        #item4 {
          grid-column:4;

          grid-row: 3;
        }
      }

  <div id="grid">
    <div id="item1"></div>
    <div id="item2"></div>
    <div id="item3"></div>
    <div id="item4"></div>
    </div>

CodePudding user response：

Your issue is a simple space between the parenthesis containing the min-width size and the and -> @media all and (min-width: 500px) instead of @media all and(min-width: 500px)

*{max-width:100%;}
      #grid {
        display: grid;
        height: 200px;
        grid-template-columns: 1fr 1fr 1fr;
    
      }
    
      #item1 {
        grid-column:2;
        background-color: lime;
      }
    
      #item2 {
        grid-column:2;
        background-color: yellow;
        grid-row: 2;
      }
    
      #item3 {
        grid-column:2;
        background-color: blue;
        grid-row: 3;
      }
    @media all and (min-width: 500px){
        #grid {
          height: 200px;
          grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    
        }
          #item1 {
          grid-column:2;
          background-color: lime;
        }
    
        #item2 {
          grid-column:4;
          background-color: yellow;
        grid-row:1;
        }
    
        #item3 {
          grid-column:2;
          background-color: blue;
          grid-row: 3;
        }
        #item4 {
          grid-column:4;
          background-color: blue;
          grid-row: 3;
        }
      }

<div id="grid">
    <div id="item1"></div>
    <div id="item2"></div>
    <div id="item3"></div>
    <div id="item4"></div>
    </div>

CodePudding user response：

I can't completely understand why, but assigning these properties to the meta tag solved the problem: name="viewport" content="width=device-width, initial-scale=1.0"

More info: The Viewport

So here is why: Explanation