Horizontal border across entire row of CSS GRID

Question

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 o

Answer 1

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

  
  
One
  
Two
  
Three

  
  
Four
  
  

  

  
  
  
  

  
-- blank row --
  

  
  
  
First Column Only
  
 
  

  
  
  

  
Second Column
  
Third Column
  
  
  

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.