CSS Grid, have an image fill height of grid item?

Question

I want to create an image grid with one large image and two smaller ones to the right of the large one, like so; screenshot: For some reason, the images won't fill the entire height of my grid items. I've found some suggestions involving setting "object-fit: cover;" on the grid items containing images but it doesn't work.

HTML:

<div class="proj-grid">
    <div class="featured"><img src="images/grid_test.png" alt=""></div>
    <div class="mini1"><img src="images/grid_test.png" alt=""></div>
    <div class="mini2"><img src="images/grid_test.png" alt=""></div>
</div>

CSS:

.proj-grid {
  display: grid;

  grid-template-areas:
    "featured featured mini1"
    "featured featured mini2";

  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 1rem;
}
.featured {
  grid-area: featured;
}

.mini1 {
  grid-area: mini1;
}

.mini2 {
  grid-area: mini2;
}

What am I missing here? Thanks!

Try this `.featured > img, .mini1 > img, .mini2 > img { width: 100%; height: 100%; object-fit: cover; }` [jsFiddle example](https://jsfiddle.net/Talavoock/4vedynqz/24/) — Shahram, Dec 06 '18 at 10:08
Did you try `vertical-align: bottom` on your `img` elements? — Michael Benjamin, Dec 06 '18 at 17:48

score 2 · Accepted Answer · edited Jun 02 '20 at 19:53

It is either the height of your image or (if your image's size is appropriately calculated) because you didn't set the image to display: block;.

Here is a working example using overflow: hidden; on the larger image to keep aspect ratio.

.proj-grid {
  display: grid;

  grid-template-areas:
    "featured featured mini1"
    "featured featured mini2";

  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 1rem;
}

.featured {
  grid-area: featured;
  overflow: hidden;
}

.mini1 {
  grid-area: mini1;
}

.mini2 {
  grid-area: mini2;
}

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

<div class="proj-grid">
    <div class="featured"><img src="https://via.placeholder.com/300x150" alt=""></div>
    <div class="mini1"><img src="https://via.placeholder.com/300x150" alt=""></div>
    <div class="mini2"><img src="https://via.placeholder.com/300x150" alt=""></div>
</div>

CSS Grid, have an image fill height of grid item?

1 Answers1