Div with "height: 100%" greater than child

Question

I'm working in WordPress with the Divi theme and I've made a grid of 2 rows and 4 columns. I'm trying to create a zigzag pattern in the grid where each div has either an image or text:

image	text	image	text
text	image	text	image

I've only just added the images and i noticed a bit of leftover space at the bottom of each image. This kind of messes up the pattern so I tried inspecting and noticed the divs which contain the images all extend a little bit further than the images.

I'm trying to get rid of the extra space at the bottom of each image by making the divs scale according to the size of the child (img).

Note: although I work in WordPress with the divi theme, I found it's easiest to make this with custom code so I'm using a Divi code module for the HTML and writing the CSS in WordPress Appearance > Customize > Additional CSS.

Image of the grid. I'm in the inspector here so it properly fits in the picture

HTML:

<section>
    <div class="grid-container">
    <div class="grid-img-1">
      <img src="/wp-content/uploads/2023/05/PC-grid-grapes.svg">
    </div>
    <div class="grid-img-2">
      <img src="/wp-content/uploads/2023/05/PC-grid-barrels.svg">
    </div>
    <div class="grid-img-3">
      <img src="/wp-content/uploads/2023/05/PC-grid-pouring.svg">
    </div>
    <div class="grid-img-4">
      <img src="/wp-content/uploads/2023/05/PC-grid-grapefield.svg">
    </div>
    <div class="grid-link-1"></div>
    <div class="grid-link-2"></div>
    <div class="grid-link-3"></div>
    <div class="grid-link-4"></div>
  </div>
</section>

CSS

/* Card grid */

.grid-container {
    display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: repeat(2, 50%);
  grid-auto-flow: row;
}

.grid-img-1 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 2;
}

.grid-img-2 {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
}

.grid-img-3 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 3;
    grid-column-end: 4;
}

.grid-img-4 {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 4;
    grid-column-end: 5;
}

.grid-link-1 {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 2;
}

.grid-link-2 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 2;
    grid-column-end: 3;
}

.grid-link-3 {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 3;
    grid-column-end: 4;
}

.grid-link-4 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 4;
    grid-column-end: 5;
}

I've tried the basics of height: 100%;, margin/padding: 0;, box-sizing: border-box;, each with and without !important just to see what worked, but nothing did.

While inspecting I also removed and added styling with the little checkbox to see if I could find anything that would cause this problem, but I couldn't find anything either.

I thought maybe the image didn't fully load in so the scale of the div would be correct, but the size of the image is as intended so I don't think that's it.

I hope it's a problem that CSS can fix because besides the fact that I'm not that skilled in JavaScript, I don't know where I could write my JavaScript code within WordPress/Divi

Answer 1

I have tried to recreate the error you are having however it doesn't seem to work! Can you share the sizes of the images involved? You can try this code on the images:

img {
height: 100%;
width: 100%;
display: block;
}

Here is a codepen on how it looks.