如何在网格内放置边框？答案

【问题标题】：How to place a border inside a grid?如何在网格内放置边框？
【发布时间】：2018-05-11 10:13:37
【问题描述】：

我正在使用 CSS 网格来构建一个相当复杂的界面。我需要在两列之间的 div 末尾放置一个边框。我该怎么做？

完成的结果必须如下所示：

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

【问题讨论】：

标签： css sass css-grid

【解决方案1】：

使用伪元素。

在网格布局中（如在 flex 布局中），容器上的伪元素被视为项目。因此，插入一个伪元素来模拟所需网格区域的边框。

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

【讨论】：

【解决方案2】：

我知道这是一个老问题，但对于其他有同样问题的人，这里有一个工作示例，可以使用 ::before 和 ::after 伪元素完成您想要的工作。它甚至适用于网格间隙。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  grid-gap: 11px;
}
 
.cell {
  position: relative;
  background-color: #ccc;
}

/* Vertical lines to the left of cells in top row */
.cell:nth-child(2)::before,
.cell:nth-child(3)::before {
  position: absolute;
  top: 0;
  left: -6px;
  content: '';
  border-left: 1px solid red;
  height: 100%;
}

/* Vertical lines to the left of cells in all other rows */
.cell:nth-child(3n+5)::before,
.cell:nth-child(3n+6)::before {
  position: absolute;
  top: -12px;
  left: -6px;
  content: '';
  border-left: 1px solid red;
  height: calc(100% + 12px);
}

/* Horizontal lines above cells in first columns */
.cell:nth-child(3n+4)::after {
  position: absolute;
  top: -6px;
  left: 0;
  content: '';
  border-bottom: 1px solid red;
  width: 100%;
}

/* Horizontal lines above cells in all other columns */
.cell:nth-child(3n+5)::after,
.cell:nth-child(3n+6)::after {
  position: absolute;
  top: -6px;
  left: -12px;
  content: '';
  border-bottom: 1px solid red;
  width: calc(100% + 12px);
}

<div class="grid">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

【讨论】：