CODEWITHSUNDEEP
htmlcssgrid
Dominik Smolinský
Dominik Smolinský

Reputation: 71

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 bigbig image css grid so i want them smaller, but when i change max-width or set width on image lower it create padding smaller image grid with 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>

Upvotes: 0

Views: 172

Answers (2)

Temani Afif
Temani Afif

Reputation: 272592

When you say 75% it means you will have 25% of free space whatever the configuration so don't play with the image size. Adjust the column size:

.mygrid {
  display: grid;
  grid-template-columns: repeat(3, 25%); /* adjust here */
  justify-content: center;
}

.mygrid img {
  max-width: 100%; /* keep 100% here */
  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>

Upvotes: 1

Connor Mooneyhan
Connor Mooneyhan

Reputation: 557

Instead of grid-template-columns: repeat(3, 1fr);, you can use grid-template-columns: repeat(3, fit-content(100%)); so that each column is fit to the image size.

Upvotes: 0

Related Questions