在 CSS 网格中的行之间减少 space

Question

我想知道如何缩小行间距？我试过将边距和填充设置为 0，但似乎没有任何效果。

左侧为桌面视图，右侧为移动视图。

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

这是一个 link 测试站点： http://www.acm.no/test/valhall/

Answer 1

问题来自 .ctrl。它占用了您需要减少的 space。它的位置是 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.

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

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

或者您可以使用 absolute 位置并像这样调整代码：

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

Answer 2

行与行之间不存在该间隙。行靠得很近。

差距是网格项目内的内容没有填充 100% 高度的结果。

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

<div class="ctrl">

您需要决定如何处理该元素。考虑绝对定位以将其从文档流中移除。然后它不会在布局中占据任何space。

无论如何，如果没有该元素（并且可以选择添加），视频将填满网格项。

（另请查看属性以获取视频/图像以填充其容器。）

在 CSS 网格中的行之间减少 space

Reduce space between rows in CSS Grid

html

css

responsive

css-grid