Why does changing the image size in css grid create padding?

im creating portfolio and i have projects section there. I have image css grid, it working but images are too big so i want them smaller, but when i change max-width or set width on image lower it create padding , how can i solve it? I dont want there the padding between images in grid. Thanks for any advice!

.mygrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.mygrid img {
  max-width: 75%;
  border: 1px solid green;
}

        <div class="mygrid mt-6">
          <img src="https://placekitten.com/1024/1024" alt="Sample photo" />
          <img src="https://placekitten.com/1024/1024" alt="Sample photo" />
          <img src="https://placekitten.com/1024/1024" alt="Sample photo" />
          <img src="https://placekitten.com/1024/1024" alt="Sample photo" />
          <img src="https://placekitten.com/1024/1024" alt="Sample photo" />
          <img src="https://placekitten.com/1024/1024" alt="Sample photo" />
          <img src="https://placekitten.com/1024/1024" alt="Sample photo" />
          <img src="https://placekitten.com/1024/1024" alt="Sample photo" />
          <img src="https://placekitten.com/1024/1024" alt="Sample photo" />
        </div>

from Recent Questions - Stack Overflow https://ift.tt/3GdpfBR
https://ift.tt/EijZP3R