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

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 fiddle :https://jsfiddle.net/wa01vz92/2/