make unordered image list spacing smaller

December 16, 2022

I am trying to make the spacing between the images less. I have tried grid gap, but its not seeming to make any difference. I just want to be able to control this area.

 #Listed{
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
  }
  .Img{
        width: 60px;
        height: 60px;
      }

  <div id="Listed">
                <div class="style">
                  <img class="Img" src="https://source.unsplash.com/random/1">
    
                </div>
                <div class="style">
                  <img class="Img" src="https://source.unsplash.com/random/2"><br>

                </div>
                  <div class="style">
                  <img class="Img" src="https://source.unsplash.com/random/3"><br>

                </div>
                  <div class="style">
                  <img class="Img" src="https://source.unsplash.com/random/4"><br>

                </div>
                <div class="style">
    <img class="Img" src="https://source.unsplash.com/random/34"><br>
                </div>
                  <div class="style">
                  <img class="Img" src="https://source.unsplash.com/random/6"><br>

                </div>
              </div>

>Solution :

This is caused by using auto-fill which will cause the elements to fill the entire width. Try using auto-fit with a 60px value in the minmax like…

#Listed{
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  }
  .Img{
        width: 60px;
        height: 60px;
      }

<div id="Listed">
                <div class="style">
                  <img class="Img" src="https://source.unsplash.com/random/1">
    
                </div>
                <div class="style">
                  <img class="Img" src="https://source.unsplash.com/random/2"><br>

                </div>
                  <div class="style">
                  <img class="Img" src="https://source.unsplash.com/random/3"><br>

                </div>
                  <div class="style">
                  <img class="Img" src="https://source.unsplash.com/random/4"><br>

                </div>
                <div class="style">
    <img class="Img" src="https://source.unsplash.com/random/34"><br>
                </div>
                  <div class="style">
                  <img class="Img" src="https://source.unsplash.com/random/6"><br>

                </div>
              </div>