title: css grid images responsive
body: <p>I'm trying to make small grid of images. On desktops I want 3 images per column and on mobiles 2 images per column. I have no problem doing that. Problems start when I shrink the size of the page to the mobile size. The images are in the proper order but they do not shrink, they keep their original size and the one on the right goes out of the grid (you can't see half of it). I tried max-width:100%, width:100% etc. Did not work. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.sponsors1 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
  
  @media(max-width:768px) {
    .sponsors1 {
      grid-template-columns: 1fr 1fr;
      justify-self: center;
      grid-gap: 8px;
      margin-top: 10px;
      margin-bottom: 20px;
      align-items: center;
      overflow:
    }
    .img1 {
      justify-self: center;
    }
    .img2 {
      justify-self: center;
    }
    .img3 {
      justify-self: center;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="sponsors1"&gt;
    &lt;a href="#/" class="img1"&gt;&lt;img src="images/#.png" alt=""&gt;&lt;/a&gt;
    &lt;a href="#" class="img2"&gt;&lt;img src="images/#.jpg" alt=""&gt;&lt;/a&gt;
    &lt;a href="#" class="img3"&gt;&lt;img src="images/#.png" alt=""&gt;&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>