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.

<div class="ctrl">

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.)

Answer 2

The issue is coming from .ctrl. It's taking the space you need to decrease. It's position is relative and :

An element with position: relative; is positioned relative to its normal position.

Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

You can add negative margin to fix this :

.ctrl {
    max-width: 30px;
    position: relative;
    bottom: 40px;
    color: black;
    text-align: left;
    padding-left: 1%;
    margin-bottom: -40px; /*added this line*/
}

Or you can use absolute position and adjust the code like this :

.one,.two,.three {
   position:relative;
}
.ctrl {
    max-width: 30px;
    position: absolute;
    bottom: 10px;
    color: black;
    text-align: left;
    padding-left: 1%;
}