我正在尝试在每个网格元素之间应用不同的间距,例如我们有以下代码。4个网格线,3个元素和每个网格框之间的10像素宽度。如何在每个网格框之间应用自定义宽度?例如,在元素1和元素2之间有20像素,然后在元素2和元素3之间有30像素?
我能用CSS网格实现吗?
编辑:不使用padding。 编辑2:提供图片。 点击查看图片预览
我能用CSS网格实现吗?
编辑:不使用padding。 编辑2:提供图片。 点击查看图片预览
html, body {height: 100%; margin: 0; padding: 0;}
body {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-row: 1fr 1fr;
grid-column-gap: 10px;
grid-row-gap: 10px;
}
#element1 {
grid-column: 1/2;
grid-row: 1/2;
border: 1px solid #2e2e2e;
color: #000;
}
#element2 {
grid-column: 2/3;
grid-row: 1/2;
border: 1px solid #2e2e2e;
color: #000;
}
#element3 {
grid-column: 3/4;
grid-row: 1/2;
border: 1px solid #2e2e2e;
color: #000;
}
<div id="element1">element1</div>
<div id="element2">element2</div>
<div id="element3">element3</div>
auto auto
,但是我在中间添加了另一列,所以 CSS 是auto 10px auto
。当你使用 CSS 网格时,<div></div>
不一定会添加一个空列。默认情况下,它会自动填充下一列,但正如我在答案中所描述的那样,你应该使用名称来指定列,例如grid-area: left;
。 - SourceOverflowgap:x
的情况下使用这个技术。 - undefined