Portfolio Project - having trouble with images not fitting consistently in grid

Code Feedback
1

Hi,

I’m finishing up the last responsive web project, but as i was building out the grids, I came across this weird thing with the images. I’m not sure what’s going on and what to do to fix it. I have the same parameters for both grids, but it acts one way for one set and another way for the other set. I think it has something to do with min-height, but not sure.

I’ve included the pen (and comments), and just the areas that are giving me trouble. You can see the problem the best (worst?) when it’s a two column grid.

Why does HAVING a set min-height on one group make it all wonky, but “fixes” (but not really) it in another? See how they’re all uneven? If you comment out and uncomment you can see what I mean.

How do I get all images in all grids to cover and fill the spaces proportionally? What am I doing wrong here? Maybe I’m not quite getting grid yet. Thanks!

https://codepen.io/studiolorenz/pen/GRjjwyN

2

Hey @patlo!
Unfortunately, I don’t have a solid answer for you. A quick look shows that some overflowing problem is going on there. Use some borders on your project-tile class to see my point. Anyway, I added the following code and kept the min-height and it works fine.

.project-tile {
  height: fit-content;
}
3

Thanks for your help. I really appreciate it. But as far as I could tell, adding that line throws off one of the images in my photo grid (as you can see in the attached photo).

I see what you mean by the borders, but not sure what I can do to fix it. I still don’t understand why the entire box isn’t filling up. I’m including a photo of the result. This is with
.project-tile { height: fit-content; } and
img { min-height: 100%; } set.

The heights for all the grids are all slightly different. Like, some by a few pixels, others by a few decimal points. I’m trying to figure out why and how to get them to at least be the same side by side.

Screen Shot 2020-12-10 at 11.58.57 AM
Screen Shot 2020-12-10 at 11.58.57 AM1830×1234 450 KB

4

For the record, I think a lot of it stems from the fact that I have text in my <a> tag, which does something to the second grid. But I can’t really figure out the best way around it.

I’ve even tried the code on the fcc sample portfolio page and even that doesn’t really fix it. On their image element, they use:

height: calc(100% - 6.8rem);
width: 100%;
object-fit: cover;