如何使伪元素跨越空白网格单元格？

Question

我有一个类似Powerpoint的布局，我正试图使用display:grid以一种响应式的方式构建它。我使用伪元素:before和:after在网格的单元格之间绘制连接线。当三个单元格相邻时，这种方法工作得很好。然而，有时我想在两个单元格之间画一条线，这两个单元格可能相隔一两行。在附加的示例中，我希望绿线从#2一直跨越到#7。

有没有可能让连接的伪元素以一种不需要硬编码高度的方式跨越间隙？我可能会想出另一个类(例如.double-height:after { height: <whatever the height of a cell plus margins is> }，但如果可能的话，我想避免这种情况。

​

.grid {
  display: grid;
  grid-template-columns: 45% 10% 45%;
 }
 
.column-0 { grid-column-start: 1; grid-column-end: 2;}
.column-1 { grid-column-start: 3; grid-column-end: 4;}
.row-0 { grid-row-start: 1; grid-row-end: 2;}
.row-1 { grid-row-start: 2; grid-row-end: 3;}
.row-2 { grid-row-start: 3; grid-row-end: 4;}
.row-3 { grid-row-start: 4; grid-row-end: 5;}
.row-4 { grid-row-start: 5; grid-row-end: 6;}
.row-5 { grid-row-start: 6; grid-row-end: 7;}
.row-6 { grid-row-start: 7; grid-row-end: 8;}

.grid > * { 
  padding: 0.25em;
  border: 1px solid #eee;
  margin: 0 0 30px;
  position: relative;
}

.line-down:after {
  content: '';
  position:absolute; 
  top:calc(100% + 5px);
  height: 20px;
  left:50%; 
  width:4px; 
  margin-left:-2px; 
  background:pink; 
  border-radius:2px; 
}
.column-1.row-1:after { background: #00ff00; }

<div class="grid">
  <div class="column-1 row-0 line-down">1</div>
  <div class="column-1 row-1 line-down">2</div>
  <div class="column-0 row-1 line-down">3</div>
  <div class="column-0 row-2 line-down">4</div>
  <div class="column-0 row-3 line-down">5</div>
  <div class="column-0 row-4 line-down">6</div>
  <div class="column-1 row-5 line-down">7</div>
  <div class="column-0 row-5">8</div>
  <div class="column-1 row-6">9</div>
</div>

​

Answer 1

我不确定这是否是您想要的，因为您还没有完全解释您的网格是如何动态的，或者给出了任何其他用例。这个解决方案既可以是硬编码的，也可以是更动态的，所以我认为它至少可以引导您朝着正确的方向前进：

您可以使用calc()巧妙地使用height属性，只要您有某种方法知道数量或行距(在本例中应该是7 - 2 = 5 )。通过这种方式，您可以根据以下数据设置绿线的::after伪元素高度：rowHeight * 2 * rowsGap，请注意乘以2，因为每行都是一个伪元素的两倍。这既可以是静态的，也可以是动态的，如果您使用JS来确定应用程序/网站中的rowHeight和rowsGap，则可以使用您确定的比例。

下面是实际的css代码：

.grid {
  display: grid;
  grid-template-columns: 45% 10% 45%;
 }

.column-0 { grid-column-start: 1; grid-column-end: 2;}
.column-1 { grid-column-start: 3; grid-column-end: 4;}
.row-0 { grid-row-start: 1; grid-row-end: 2;}
.row-1 { grid-row-start: 2; grid-row-end: 3;}
.row-2 { grid-row-start: 3; grid-row-end: 4;}
.row-3 { grid-row-start: 4; grid-row-end: 5;}
.row-4 { grid-row-start: 5; grid-row-end: 6;}
.row-5 { grid-row-start: 6; grid-row-end: 7;}
.row-6 { grid-row-start: 7; grid-row-end: 8;}

.grid > * { 
  padding: 0.25em;
  border: 1px solid #eee;
  margin: 0 0 30px;
  position: relative;
}

.line-down:after {
  content: '';
  position:absolute; 
  top:calc(100% + 5px);
  height: 20px;
  left:50%; 
  width:4px; 
  margin-left:-2px; 
  background:pink; 
  border-radius:2px; 
}
.column-1.row-1:after { 
  background: #00ff00;
  height: calc(20px * 10);
}

请注意，更改仅发生在.column-1.row-1:after规则上：

.column-1.row-1:after { 
  background: #00ff00;
  height: calc(20px * 10);
}

下面是一个有效的js小提琴：https://jsfiddle.net/wa01vz92/2/