Horizontal border across entire row of CSS GRID
Imagine your table as a collection of cells (much like an excel spreadsheet). You can create a simple cell class that you append to each of your grid items to manipulate the cells without affecting the table data itself. Consider:
.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>Note that I only used a grid-row-gap. If you introduce a grid-gap, or a grid-column-gap, your lines will be broken at the column gaps (this may be the desired effect in some cases).
It is true that this is a more involved method of controlling the horizontal lines separating the grid and less "programmatic" and more micro-management-esque but, it does provide great control over introducing the lines into your grid.
The other answers were great options too! I just wanted to provide my two cents.
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>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>