如何在CSS Grid内部指定位置添加边框？

嘿，我来帮你搞定这个CSS Grid加边框的问题！结合你给出的代码和预期效果，我整理了两种简单可行的实现方式，完美适配你的需求：

先修正代码里的小失误 #

先提个小细节：你SCSS里的grid-template-columns那行多写了个分号，这会导致网格列配置失效，修正后的写法是：

.expandeble {
  display: grid;
  height: 6.15vh;
  grid-template-columns: 15.62vw 2.01vw 21.87vw 12.08vw 19.45vw 5.76vw 2.01vw 1.18vw 5vw 15.83vw;
  grid-template-rows: minmax(18px, 1.76vw) minmax(max-content, 3.51vh) 1.76vw;
}

方案一：用专门的边框元素（对应你给出的.placeBorder配置） #

你已经定义好了.placeBorder的网格定位规则，只需要补全样式并添加DOM元素就行：

1. 补充HTML结构 #

把.placeBorder元素放到.expandeble容器里：

<div class="footer">
  <div class="expandeble">
    <div class="expID">
      <label class="idLabel">XXXX</label>
    </div>
    <!-- 新增边框元素 -->
    <div class="placeBorder"></div>
  </div>
</div>

2. 给.placeBorder设置边框样式 #

根据你要的效果（对应示例图里的分隔边框），添加边框样式：

.placeBorder {
  grid-column-start: 3;
  grid-column-end: 9;
  grid-row-start: 3;
  /* 设置顶部边框，刚好对应第三行的顶部，也就是上一行的底部 */
  border-top: 1px solid #333; /* 颜色、粗细可以根据需求调整 */
  /* 如果是要两列之间的垂直边框，就换成border-left/border-right，同时调整列位置即可 */
}

方案二：用伪元素（无需额外DOM） #

如果不想多加一个元素，用.expandeble的伪元素就能实现，同样精准定位到目标网格区域：

.expandeble::after {
  content: "";
  /* 简写网格定位，和你写的start/end效果一致 */
  grid-column: 3 / 9;
  grid-row: 3;
  border-top: 1px solid #333;
  width: 100%; /* 确保伪元素占满列宽 */
}

这两种方式都能完美实现你要的效果，如果你需要调整边框的位置或者样式，只需要修改边框属性或者网格定位参数就可以啦～

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