Question

我有一个div，其元素对齐为一行，这是它的css类：

＆＃13;

.myRow {
  display: grid;
  grid-template-columns: 0.1fr 0.1fr 2fr 3fr 2fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: center;
  padding: 10px;
}

＆＃13;

<div class="myRow">
  <div style="color:blue; width: 5px;">aa</div>
  <div style="color:red;">bb</div>
  <div style="color:green;">ccc</div>
  <div style="color:orange;">ddd</div>
  <div style="color:purple;">eee</div>
</div>

＆＃13;

我希望能够删除前两个差距，并保留其余的差距，例如grid-template-columns的工作方式。

是否可以使用网格执行此操作？

编辑：我希望它是这样的：

Answer 1

添加负右边距，其值等于网格间隙

.myRow {
  display: grid;
  grid-template-columns: 0.1fr 0.1fr 2fr 3fr 2fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: center;
  padding: 10px;
}

.margin {
  margin-right: -10px
}

<div class="myRow">
  <div class="margin" style="color:blue; width: 5px; ">aa</div>
  <div class="margin" style="color:red;">bb</div>
  <div style="color:green;">ccc</div>
  <div style="color:orange;">ddd</div>
  <div style="color:purple;">eee</div>
</div>

Answer 2

您无法为网格间隙设置多个尺寸。 column-gap和row-gap属性（以前为grid-column-gap和grid-row-gap）只接受一个值。

此问题详见此处：

Setting different lengths for grid gaps in CSS Grid

应用于网格容器的伪元素被视为网格项。

此处解释了此行为：

pseudo-element acting like a grid item in CSS grid

order属性可用于在屏幕上重新排列网格项。

此处有更多详情：

Consider the order property of flex and grid layouts

结合使用，您可以创建列间距 - 只有两个 - 使用::before和::after伪元素，使用order属性排列其位置，并摆脱grid-column-gap规则。

.myRow {
  display: grid;
  grid-template-columns: 0.1fr 0.1fr 2fr auto 3fr auto 2fr;
  justify-content: center;
  padding: 10px;
}

.myRow::before {
  content: "";
  width: 10px;
  background-color: white;
}

.myRow::after {
  content: "";
  width: 10px;
  background-color: white;
}

.myRow > :nth-child(1) { order: -3; }
.myRow > :nth-child(2) { order: -2; }
.myRow > :nth-child(3) { order: -1; }
.myRow > :nth-child(5) { order: 1; }

.myRow > div {
  background-color: lightgray;
}

<div class="myRow">
  <div style="color:blue;">aa</div>
  <div style="color:red;">bb</div>
  <div style="color:green;">ccc</div>
  <div style="color:orange;">ddd</div>
  <div style="color:purple;">eee</div>
</div>

以下是关于其工作原理的更多内容：

由于order属性的默认值为0，并且项目按源顺序排列，因此浏览器会看到上面的nth-child伪类代码：< / p>

.myRow > :nth-child(1) { order: -3; }
.myRow > :nth-child(2) { order: -2; }
.myRow > :nth-child(3) { order: -1; } /*
.myRow > ::before      { order: 0; }
.myRow > :nth-child(4) { order: 0; }
.myRow > ::after       { order: 0; } */
.myRow > :nth-child(5) { order: 1; }

消除网格间隙

2 个答案: