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

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%;
}