title: css grid is not responsive
body: <p>I'm making a <code>grid</code> with 3 columns and 3 rows everything works fine but it's not <code>responsive</code> I tried to use <code>media queries</code> but it looks like <a href="https://prnt.sc/sj47qu" rel="nofollow noreferrer">this</a>.</p>
  <p>any solutions?</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;projectPhotos&quot;&gt;
   &lt;div class=&quot;_a p1&quot;&gt;1&lt;/div&gt;
   &lt;div class=&quot;_a p2&quot;&gt;2&lt;/div&gt;
   &lt;div class=&quot;_a p3&quot;&gt;3&lt;/div&gt;
   &lt;div class=&quot;_a p4&quot;&gt;4&lt;/div&gt;
   &lt;div class=&quot;_a p5&quot;&gt;5&lt;/div&gt;
   &lt;div class=&quot;_a p6&quot;&gt;6&lt;/div&gt;
   &lt;div class=&quot;_a p7&quot;&gt;7&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>._a{
    width:220px;
    height:120px;
    background:gray;
    border: 1px solid #fff;
    font-size: 30px;
    text-align: center;
    color:white;
    margin: auto;
  }
  .projectPhotos{
    display: grid;
    grid-template-columns: auto auto auto;
    box-sizing: border-box;
    grid-gap: 40px 60px;
    box-sizing: border-box;
  }
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>@media only screen and (max-width: 600px) {
    .projects{
      width:350px;
    }
    .projectPhotos{
      grid-gap:10px 10px;
    }
    .projectPhotos ._a{
      width:300px;
      height:100px;
    }
  }
  
  </code></pre>