如何用HTML/CSS、Angular+SCSS实现3列布局中跨行列连接效果？

针对你的需求，结合Angular和SCSS，推荐用CSS Grid + 伪元素的方案，无需JS即可实现，同时支持动态控制连线显示，以下是具体实现：

核心思路 #

用CSS Grid构建3列布局，通过给目标行添加自定义类，利用伪元素绝对定位生成水平连线，精准连接第一列与第二列的对应行，垂直居中对齐。

代码实现 #

HTML结构（Angular模板） #

<div class="column-layout">
  <!-- 普通行 -->
  <div class="row">
    <div class="column">第一列内容1</div>
    <div class="column">第二列内容1</div>
    <div class="column">第三列内容1</div>
  </div>
  <!-- 普通行 -->
  <div class="row">
    <div class="column">第一列内容2</div>
    <div class="column">第二列内容2</div>
    <div class="column">第三列内容2</div>
  </div>
  <!-- 需要连线的行 -->
  <div class="row connect-col-1-2">
    <div class="column">第一列内容3</div>
    <div class="column">第二列内容3</div>
    <div class="column">第三列内容3</div>
  </div>
</div>

SCSS样式 #

// 可复用变量，方便后续调整布局
$col-count: 3;
$col-gap: 2rem;
$line-color: #000;
$line-height: 1px;

.column-layout {
  display: grid;
  grid-template-columns: repeat($col-count, 1fr);
  gap: $col-gap;
  width: 85%;
  margin: 2rem auto;
}

.row {
  display: contents; // 让子元素直接参与Grid布局，保证列对齐
  position: relative;

  // 目标行的连线样式
  &.connect-col-1-2::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    // 计算线条位置：从第一列右边缘到第二列左边缘
    left: calc(100% / $col-count);
    right: calc(100% * ($col-count - 1) / $col-count);
    height: $line-height;
    background-color: $line-color;
  }
}

.column {
  padding: 1.2rem;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

动态控制连线（Angular场景） #

如果需要根据业务逻辑动态决定哪些行显示连线，可通过ngClass绑定实现：

<div class="row" [ngClass]="{'connect-col-1-2': item.showConnector}">
  <div class="column">{{ item.col1Content }}</div>
  <div class="column">{{ item.col2Content }}</div>
  <div class="column">{{ item.col3Content }}</div>
</div>

在组件类中定义数据：

items = [
  { col1Content: '内容1', col2Content: '内容2', col3Content: '内容3', showConnector: false },
  { col1Content: '内容4', col2Content: '内容5', col3Content: '内容6', showConnector: true },
  // ...更多数据
];

方案优势 #

1. 纯CSS实现，无需JS计算位置，性能更优
2. SCSS变量化布局参数，便于后续调整列数、间距、线条样式
3. 完美适配Angular的动态渲染逻辑，结合ngClass可灵活控制连线显示

内容的提问来源于stack exchange，提问作者Jose Zamudio