Как разместить границу внутри сетки?

Question

Я использую сетку CSS для создания довольно сложного интерфейса.Мне нужно поместить границу в конце деления между двумя столбцами.Как мне это сделать?

Готовый результат должен выглядеть следующим образом:

HTML

<div class="footer">
  <div class="expandeble">
    <div class="expID">
      <label class="idLabel">XXXX</label>
    </div>
   </div>
</div>

SCSS

.footer {
  display: flex;
  width: 100vw;
  height: available;
}

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

.expID {
  grid-column-start: 3;
  grid-row-start: 2;
}

Граница должна иметь эту конфигурацию:

.placeBorder {
  grid-column-start: 3;
  grid-column-end: 9;
  grid-row-start: 3;
}

Answer 1

Используйте псевдоэлемент.

В сеточной компоновке (как в гибкой компоновке) псевдоэлементы на контейнере считаются элементами.Поэтому вставьте псевдо, который будет имитировать границу в нужной области сетки.

.expandeble::after {
  content: "";
  border: 1px solid red;
  height: 0;
  grid-column-start: 3;
  grid-column-end: 9;
  grid-row-start: 3;
}

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

.expID {
  grid-column-start: 3;
  grid-row-start: 2;
}

/* new */
.expandeble::after {
  content: "";
  border: 1px solid red;
  height: 0;
  grid-column-start: 3;
  grid-column-end: 9;
  grid-row-start: 3;
}

<div class="footer">
  <div class="expandeble">
    <div class="expID">
      <label class="idLabel">XXXX</label>
    </div>
   </div>
</div>