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

添加一个等于边框宽度的 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) 个元素的伪元素：

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

Answer 2

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

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

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

的确，这是一种更复杂的控制分隔网格的水平线的方法，更少 "programmatic" 和更多的微观管理风格，但它确实提供了很好的控制将线引入您的网格.

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

Answer 3

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

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>

CSS GRID 整行的水平边框

Horizontal border across entire row of CSS GRID

html

css

css-tables

css-grid