CSS 网格。每个网格之间的间隙不同

Question

我试图在每个网格元素之间应用不同的间隙，例如我们有以下代码。4 条网格线、3 个元素和每个网格框之间的 10 像素宽度。如何在每个网格框之间应用自定义宽度？例如 element1 和 element2 之间的 20px，然后 element2 和 element3 之间的 30px？

我可以用 css 网格来实现吗？

编辑：不使用填充。Edit2: 提供了 Pictre。

点击图片预览

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>

Answer 1

我喜欢与 css-grid 一起使用的一般方法是制作额外的列。显然使用grid-column-gap，grid-row-gap如果你有相同的填充，但如果没有，你可以添加标记列。

为什么不填充/边距？

您完全可以为此使用填充/边距，但我更喜欢额外的列，因为在 css-grid 中，您可以在包装器中定义布局，这在语义上属于它。您也不必将其应用于这些列中的每个项目。（此外，您是将其应用于左侧还是右侧或两个项目？）。

但这打乱了我的编号

是的，这就是为什么你从不使用数字来描述 css 网格中的区域！

您可以命名您的线路以及您的区域。用这个！你可以使用grid-template-areas这个矿石简单地命名它像这样：

grid-template-columns: [left-start] auto [left-end right-start] auto [right-end];

哦，你想要额外的填充吗？干得好：

grid-template-columns: [left-start] auto [left-end] 10px [right-start] auto [right-end];

请注意，我绝不是经验丰富的 Web 开发人员（恰恰相反），但我认为这种方法可能 - 通常 - 是最好的方法。