整行CSS GRID的水平边框 [英] Horizontal border across entire row of CSS GRID

问题描述

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

I need to use a grid layout but also need a horizontal line separating each row.

我唯一能找到的就是在每个单元格上应用边框，但这仅在有足够的单元格可以填充每一行的情况下有效.

The only thing I've been able to find is applying a border to each cell, but this only works if there are enough cells to fill each row.

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

是否可以解决上述问题，使整行都有边框?

Is there a way to fix the above so that the entire row has a border?

推荐答案

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

Add a grid-gap equal to the width of your border then consider gradient to achieve this:

.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)个元素的伪元素:

Another idea is to consider a pseudo-element that you add to the 1st,4th,7th .. (3n + 1)th element:

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

这篇关于整行CSS GRID的水平边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！