Making Grid Rows the same height?

Hi, here’s my project: https://codepen.io/zara-knox/pen/LYZWMym

This is my first foray into the world of grids, and here’s what I have so far. I don’t know how to get the two rows to be of equal height. I read that
grid-auto-rows: 1fr should work, but it does nothing.

As this is my first time using grids, I’m sure there is a more eloquent way to write the grid, and I still have no clue how to use minmax etc. properly yet. Any advice welcome for the height issue as well as anything else!

Forgive the ugliness at present - it hasn’t been styled yet, and the colours are just placeholders for visibility while I work.

Thanks, all.

Hi,

I’m still learning css grid so forgive me if what I say ends up being wrong or unhelpful - hopefully someone who actually knows what they’re talking about will come along later. But… as far as I can tell, your rows are of equal height. If I add a border to the <a> tags inside #projects-grid I get this:

But because your image files are slightly different sizes, they end up sitting a little funky. If you can be bothered to remake all your image files to be the same size, that would be one way of solving the problem. There probably is a neater way round it with css but I’m afraid I don’t know what that is yet :slight_smile:

1 Like

Hi @ZaraK. Actually your grid items are aligned properly as far as I can tell . And they are not img elements but rather the a elements. It is the img elements which are not aligned and they are children of the a tags. Therefore I don’t think this is a problem of aligning grid items but rather making img elements fit in their containing elements without losing their aspect ratio. Since you are applying {width: 100%; height: auto} on the img elements, I doubt whether the images will really be aligned because that CSS will adjust the image height accordingly so as to maintain the img aspect ratio. Applying the following to the img tag won’t maintain the image aspect ratio but at least fix the alignment issue.

.project-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
1 Like

Thanks for taking a look! It’s so frustrating, because while I was able to make them all the same size by messing about with the styles, they would end up with the tops chopped off when I went into Debug view, which made it look a bit shoddy. Definitely need more practise with Grids. I spent some time getting Flexbox (sort of) down, but Grids is a whole new level.

A bit terrifying as I’m not even learning actual languages yet!

Thanks for this - that’s sorted it. The aspect ratios look okay - they haven’t been skewed or anything. A quick check in Debug view and they still look fine.

I wonder - why/how does displaying the images as ‘block’ work for fixing alignment? Sorry for the stupid question - just trying to figure out the mechanics of it.

1 Like

That’s what I keep telling myself when I start to get frustrated with things. I just need more practice. I often get the feeling like I ought to be further along but, really, I’ve only been doing this for a couple of months, so while I can understand quite a lot of it, it’s definitely not under my fingers yet. But I’ll get there. And so will you.

You got this :slight_smile:

1 Like

Cheers! Keep on grinding :muscle:

1 Like

It isn’t a stupid question. I think the accepted answer to this stackoverflow question thoroughly explains why it is necessary to add display: block.

1 Like

That’s a great explanation - thanks for sharing. This is exactly what I was fruitlessly googling around for. I’d say a good 40 if not 50% of my coding experience so far has been spent on googling.

Thanks again!

1 Like