减少CSS Grid中行之间的空间

Question

我想知道如何减少行之间的间距？我已经尝试将边距和填充设置为0，但似乎没有任何东西咬人。

左侧的Destktop视图和右侧的移动视图。

.content{
    margin: 0;
    padding: 0;  
    width: 100%;
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(36, 1fr); 
    justify-items: stretch;
    align-content: start;
    }

.one{
    grid-column: 1/37;
    width: 100%;
}

.two{
    grid-column: 1/11;

}
.three{
    grid-column: 12/24;
    justify-self: center;
    align-self: start;
    position: relative;
    bottom: 5px;
}
.four{
    grid-column: 25/37;
}

以下是测试网站的链接： http://www.acm.no/test/valhall/

Answer 1

问题来自select p.* from purchases p where client_id in (1, 54) and start_time >= sysdate - 7 days and start_time < start_time and to_char(start_time, 'HH24:MI') in ('00:01', '00:02'); 。它占用了你需要减少的空间。它的位置是相对和：

  

位置为相对的元素;是相对于它的   正常的位置。

     

设置a的top，right，bottom和left属性   相对定位的元素将导致它被调整远离   它的正常位置。 其他内容不会调整为适合   元素留下的任何差距。

您可以添加负边距来解决此问题：

.ctrl

或者你可以使用绝对位置并调整代码如下：

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

您可以阅读有关CSS positioning

的更多信息

Answer 2

行之间不存在这种差距。行紧密相连。

间隙是网格内部内容未达到100％高度的结果。

然后，你有第二个元素占据了底部的空间。

<div class="ctrl">

您需要决定如何处理该元素。考虑绝对定位将其从文档流中删除。然后它不会占用布局中的任何空间。

在任何情况下，如果没有该元素（并且可选择添加vertical-align），视频会填满网格项。

（另请查看object-fit属性，了解视频/图片是否已填满其容器。）