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

Question

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

我可以用 CSS 网格实现这一点吗？

编辑：不使用填充。
编辑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>

Answer 1

我喜欢在 css-grid 中使用的一般方法是创建额外的列。如果您有相同的填充，显然可以使用

grid-column-gap

和

grid-row-gap

，但如果没有，您可以添加标记列。

为什么不填充/边距？

你完全可以使用 padding/margin 来实现这一点，但我更喜欢额外的列，因为在 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 开发人员（恰恰相反），但我认为这种方法通常可能是最好的方法。

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/

Answer 3

您可以定义与此类似的网格（点表示间隙列）：

display: grid;
  grid:
    'ava  .    name .    eye ' auto
    'ava  .    .    .    .   ' 4px
    'ava  .    info info info' auto
    'ava  .    .    .    .   ' 10px
    'ava  .    edit edit edit' auto
   / auto 14px 1fr  8px  auto;
  gap: 0;

如果间隙更复杂，则需要更多行和列或在单元格中带有填充的 div 容器。