跨整行 CSS GRID 的水平边框

Question

我需要使用网格布局，但还需要一条水平线分隔每一行。

我唯一能找到的就是为每个单元格应用边框，但这只有在有足够的单元格来填充每一行时才有效。

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

.box {
  border-bottom: 2px solid #ffa94d;
  padding: 1em;
}

<div class="wrapper">
  <div class="box">One</div>
  <div class="box">Two</div>
  <div class="box">Three</div>
  <div class="box">Four</div>
</div>

有没有办法解决上述问题，使整行都有边框？

Answer 1

这可以通过一个绝对定位的伪元素来实现。它将覆盖网格间隙。您必须将其设置为较宽的宽度，这只是有点 hacky，然后将容器上的溢出设置为隐藏。

body {
  margin:0;padding:0;
}

.products {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap:20px;
  overflow:hidden;
  border-bottom:1px solid black;
}

.card-product {
  position:relative;
  text-align:center;
}
.card-product:after {
  content:'';
  position:absolute;
  border-bottom:1px solid black;
  top:-20px;left:0;
  height:1px;
  width:1000%;
}

<section class="products">

  <article class="card-product">  
    <h3 class="card-product__title">
      Product Title
    </h3>
    <h4 class="card-product__sub">
      Product Category
    </h4>
  </article>

  <article class="card-product">  
    <h3 class="card-product__title">
      Product Title
    </h3>
    <h4 class="card-product__sub">
      Product Category
    </h4>
  </article>

  <article class="card-product">  
    <h3 class="card-product__title">
      Product Title
    </h3>
    <h4 class="card-product__sub">
      Product Category
    </h4>
  </article>
  
  <article class="card-product">  
    <h3 class="card-product__title">
      Product Title
    </h3>
    <h4 class="card-product__sub">
      Product Category
    </h4>
  </article>

  <article class="card-product">  
    <h3 class="card-product__title">
      Product Title
    </h3>
    <h4 class="card-product__sub">
      Product Category
    </h4>
  </article>

  <article class="card-product">  
    <h3 class="card-product__title">
      Product Title
    </h3>
    <h4 class="card-product__sub">
      Product Category
    </h4>
  </article>

  <article class="card-product">  
    <h3 class="card-product__title">
      Product Title
    </h3>
    <h4 class="card-product__sub">
      Product Category
    </h4>
  </article>

</section>

Answer 2

将您的表格想象成一组单元格（很像 Excel 电子表格）。您可以创建一个简单的单元格类，将其附加到每个网格项以在不影响表格数据本身的情况下操作单元格。考虑：

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  
  grid-row-gap: 20px;
}


.cell {
  position: relative;
  border-bottom: 2px solid #ffa94d;
}

<div class="wrapper">
  <!-- Here is your first row -->
  <div class="cell">One</div>
  <div class="cell">Two</div>
  <div class="cell">Three</div>

  <!-- Here is your second row -->
  <div class="cell">Four</div>
  <!-- You can extend the line by the number of cells per row -->
  <div class="cell"></div>
  <div class="cell"></div>
  
  <!-- Organize your html into row groups to easily visualize them -->
  <!-- This will produce a blank row with no line -->
  <div></div>
  <div>-- blank row --</div>
  <div></div>
  
  <!-- You can also control where the line begins and ends -->
  <div class="box cell">First Column Only</div>
  <div></div> <!-- No cells here.. We just want to underline the first column -->
  <div></div>
  
  <!-- 2nd and 3rd columns only -->
  <div></div>
  <div class="cell">Second Column</div>
  <div class="cell">Third Column</div>
  
  
  
</div>

请注意，我只使用了网格行间隙。如果您引入网格间隙或网格列间隙，您的线条将在列间隙处断开（在某些情况下这可能是所需的效果）。

确实，这是一种更复杂的方法来控制分隔网格的水平线，并且更少“程序化”和更多的微观管理，但它确实可以很好地控制将线引入网格。

其他答案也是不错的选择！我只是想提供我的两分钱。

Answer 3

添加一个等于边框宽度的grid-gap，然后考虑使用渐变来实现：

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  grid-row-gap:2px;
  background:
    repeating-linear-gradient(to bottom,
      transparent 0,
      transparent 100px,
      #ffa94d 100px,
      #ffa94d 102px /*+2px here*/
    );
}

.box {
  padding: 1em;
}

<div class="wrapper">
  <div class="box">One</div>
  <div class="box">Two</div>
  <div class="box">Three</div>
  <div class="box">Four</div>
</div>

另一个想法是考虑添加到第 1、4、7 个的伪元素 ..(3n + 1)th 元素：

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  overflow:hidden;
}

.box {
  position:relative;
  padding: 1em;
}
.box:nth-child(3n + 1)::after {
  content:"";
  position:absolute;
  bottom:0px;
  left:0;
  width:100vw;
  height:2px;
  background:#ffa94d;
}

<div class="wrapper">
  <div class="box">One</div>
  <div class="box">Two</div>
  <div class="box">Three</div>
  <div class="box">Four</div>
</div>