Reduce space between rows in CSS Grid

Question

I\'m wondering how to reduce the spacing between the rows? I\'ve tried setting margins and paddings to 0, but nothing seems to be biting.

Destktop view on the left and

Answer 1

That gap doesn't exist between rows. The rows are close together.

The gap is the result of the content inside the grid items not filling 100% height.

Then, you have a second element which takes up space at the bottom.

You need to decide what to do with that element. Consider absolute positioning to remove it from the document flow. Then it won't occupy any space in the layout.

In any case, without that element (and with the optional addition of vertical-align), the video fills up the grid item.

(Also look into the object-fit property for getting videos / images to fill up their containers.)