cssresponsive-designgridcss-grid

CSS grid images responsive


I'm trying to create a small grid of images. On desktops, I want 3 images per column, and on mobiles, I want 2 images per column. I have no problem doing that. Problems start when I shrink the page to 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., but it did not work.

.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;
  }
}
<div class="sponsors1">
  <a href="#/" class="img1"><img src="images/#.png" alt=""></a>
  <a href="#" class="img2"><img src="images/#.jpg" alt=""></a>
  <a href="#" class="img3"><img src="images/#.png" alt=""></a>
</div>


Solution

  • You should set your image containers' justify-self properties to stretch and then set the image's (NOT their containers') widths to 100%.

            .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: stretch;
                }
                .img2{
                    justify-self: stretch;
                }
                .img3{
                    justify-self: stretch;
                }
            }
            img {
                width: 100%
            }
    <div class="sponsors1">
       <a href="#" class="img1"><img src="https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg" alt=""></a>
       <a href="#" class="img2"><img src="https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg" alt=""></a>
       <a href="#" class="img3"><img src="https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg" alt=""></a>
    </div>