Currently, I am working on my portfolio and have a projects section. In this section, I have implemented an image CSS grid that is functional but the images appear to be too large https://i.sstatic.net/KNHqJ.png. I would like to make them smaller, however, when I adjust the max-width or set a lower width for the image, it creates padding https://i.sstatic.net/erCgX.png. How can I solve this issue? I do not want there to be padding between the images in the grid. Thank you in advance 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>