CSS Grids. 每个网格之间的间隔不同。

Question

CSS Grids. 每个网格之间的间隔不同。

21

我正在尝试在每个网格元素之间应用不同的间距，例如我们有以下代码。4个网格线，3个元素和每个网格框之间的10像素宽度。如何在每个网格框之间应用自定义宽度？例如，在元素1和元素2之间有20像素，然后在元素2和元素3之间有30像素？

我能用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>

- Knightwalker

2个回答

0

针对您的情况，我在网格上没有看到任何具体内容，但是您可以通过添加填充轻松实现所需的结果。

HTML

<div id="grid">
  <div id="element1">
    <div class="content">element1</div>
  </div>
  <div id="element2">
    <div class="content">element2</div>
  </div>
  <div id="element3">
    <div class="content">element3</div>
  </div>
</div>

CSS

#element1 {
  padding-right: 5px;
}

#element2 {
  padding-left: 5px;
  padding-right: 10px;
}

#element3 {
  padding-left: 10px;
}

.content {
  height: 100%;
  border: 1px solid #2e2e2e;
}

JsFiddle 示例：
https://jsfiddle.net/wkt39kk8/

- m.spyratos

是的，我可以添加填充，但是在我的布局中，某种方式我没有达到期望的结果。也许我应该采用另一种方法？我能问一下目前布局的最佳实践是什么吗？ - Knightwalker

你在边距方面遇到了什么问题？ - m.spyratos

我有很多元素和很多网格。为了解释问题，我在这里简单地制作了一些网格以便提问。在我的布局中，我有一些图像，它们位于几个div中，其中一个甚至在图片上方有一个框架，而框架本身则溢出到另一个网格中。这就是为什么我正在寻找一种方法在它们之间留出一些空间的原因。填充并没有按预期工作，我给它30px填充，但它只填充了20px。然后我尝试用200px填充。再次只移动了20px。很抱歉我现在无法提供截图。 - Knightwalker

@Knightwalker，你应该在问题中提供所有这些细节，并发布足够的代码以重现实际问题。如果你想为一个特定的问题寻求帮助，就要问一个具体的问题。 - Michael Benjamin

1

很明确！我正在寻找一种在3个网格之间添加自定义宽度的方法。这是重现问题所需的所有代码！ - Knightwalker

显示剩余2条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SourceOverflow · Accepted Answer

对于css-grid，我喜欢使用的一般方法是添加额外的列。如果有相同的填充，请使用grid-column-gap和grid-row-gap，但如果没有，可以添加token列。

为什么不使用padding / margin？

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

但这会破坏我的编号

是的，这就是为什么永远不要使用数字来描述css grid中的区域！

您可以为线路和区域命名。使用它！您可以使用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];

请注意，我绝非经验丰富的网络开发人员（相反的情况更多），但我认为这种方法可能是最好的 - 一般来说。