Grid item height issue

Hello,

codepen : https://codepen.io/johnthecoder/pen/dyPYGWj?editors=1100

So I’m doing a grid display where I have two column.

On the left the first thing I have is a title div, wich is very small, the rest are just cards.
So I did a span 1 for the title div and a span 2 for the items.
But the first card on the left column doesn’t have the same size as the others, it is bigger then I expect to. I don’t understand why.

Any help would be great !

It is sharing the implicit rows created also used by projets-header. You can make explicit rows and change the span values, or try using grid-row: span 4 for the list-item.

Thanks for your answer.

With span 4 I still have an issue with the first item on the right, tiny white space at the bottom.
Also, I don’t want to make the grid explicit because I would have to do some css every time I add an item.
But, I might do it if I don’t find a solution.

I guess I didn’t really check it at different screen sizes. One option might be to just give the images a height and use object-fit: cover.

object-fit: cover;
height: 304px;