代码之家 › 专栏 › 技术社区 › shinzou

删除网格间隙

css-grid css3 css html

1

shinzou · 技术社区 · 6 年前

我有一个DIV,元素作为行对齐,这是它的CSS类:

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

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

我希望能够消除前两个缺口并保持其余的缺口,比如 grid-template-columns 作品.

是否可以使用网格进行此操作?

编辑:我希望这样:

2 回复 | 直到 6 年前

1

Michael Benjamin 6 年前

不能为网格间隙设置多个大小。这个 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 伪元素,用 秩序 财产,并摆脱 网格列间隙 规则。

.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>

以下是关于这项工作的更多信息:

因为默认值 秩序 属性为 0 ,然后按源顺序放置项目,这是浏览器看到 nth-child 上面的伪类代码:

.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

Gautam Naik 6 年前

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

.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>