为什么不填充/保证金？

Question

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

我能用css网格实现吗？

编辑：不使用填充。编辑2：提供Pictre。

Click for picture preview

＆＃13;

obj.likes.add(user)
#Add notification to UserNotification model
notification = UserNotification.objects.create(
    user=self.request.user,
    post=obj,
    notify_type="???"
)

＆＃13;

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

＆＃13;

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];

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

Answer 2

对于您的案例，我没有看到Grid的具体内容，但您可以通过添加填充来轻松实现所需的结果。

<强> 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/

CSS网格。每个网格之间的差距不同

2 个答案:

为什么不填充/保证金？

但这会弄乱我的编号