How to make grid lines visible?

Question

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
</div>

The problem with this solution is, if i have empty grid areas, there will not be lines. But i need the lines around all grid areas. If i add items to the empty grid areas, and set them only a border will be fine, but what if the number of empty elements (and non-empty elements) are unknown? And what if the element is more long than one cell? I want border around every cell.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
.longer {
  grid-column: auto / span 2;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item longer">7</div>
</div>

Okay, i can make the longer item to a grid, and set it's template-columns into it's value of span, and fill the cells, but it will not be an elegant solution.

So please, let me know the best solution.

Answer 1

An idea would be to add these lines using multiple backgound with linear-gradient:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background:
   linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) calc((100% - 20px) / 3 + 10px) 10px / 2px calc(100% - 20px),
   linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) calc(2*((100% - 20px) / 3) + 10px) 10px / 2px calc(100% - 20px),
   linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) calc(100% - 10px) 10px / 1px calc(100% - 20px),
   linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) 10px calc(100% - 10px)  /calc(100% - 20px)  1px;
  padding:10px;
  background-repeat:no-repeat; 
  background-color: #2196F3;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
</div>

How it works?

The idea is to create lines with gradient and each one will have this format:

linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) X Y/width height

As you can see I used the same color in the gradient since the idea is to have a solid line then we simply need to specify the dimension and the position. For the dimension we have two cases: it's either a vertical line so we will have [2px 100%] in the dimension part or an horizontal line and we will have [100% 2px] (it's only 1px for the lines at the edge).

By the way if you look closely to the code I didn't use 100% but I made it calc(100% - 20px) because of the padding so we should remove it for the size of the line.

Now we need to adjust the position of our lines and here we need to also consider padding and the number of row/colums. Let's consider our cases where we have 3 columns and 3 rows:

Let's consider the position of the first line. As you can see the Y is pretty easy, it's the padding (10px) but the X is more tricky but if you look closely we will see it's not very difficult and its formula is like this:

10px + (100% - 20px)/3 

So we have the 10px of padding plus the inner width without padding divided by 3. We apply the same logic for the other lines.

Here is an example with the grid built only with gradient:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background:
  /* vertical lines*/
  linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) 10px 10px / 1px calc(100% - 20px),
   linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) calc((100% - 20px) / 3 + 10px) 10px / 2px calc(100% - 20px),
   linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) calc(2*((100% - 20px) / 3) + 10px) 10px / 2px calc(100% - 20px),
   linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) calc(100% - 10px) 10px / 1px calc(100% - 20px),
  /* horizontal lines*/
  linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) 10px 10px  /calc(100% - 20px)  1px,
  linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) 10px calc((100% - 20px) / 3 + 10px)  / calc(100% - 20px) 2px,
   linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) 10px calc(2*((100% - 20px) / 3) + 10px) / calc(100% - 20px) 2px,
  linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)) 10px calc(100% - 10px)  /calc(100% - 20px)  1px;
  padding:10px;
  background-repeat:no-repeat; 
  background-color: #2196F3;
}
.grid-item {
  opacity:0;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
</div>

And here is another simplified syntax using CSS variables where you can better see the patterns and different values used:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  --c:linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8));
  --p:10px;
  --w:calc(100% - 2*var(--p));
  background:
  /* vertical lines*/
   var(--c) var(--p) var(--p) / 1px var(--w),
   var(--c) calc(1*(var(--w) / 3) + var(--p)) var(--p) / 2px var(--w),
   var(--c) calc(2*(var(--w) / 3) + var(--p)) var(--p) / 2px var(--w),
   var(--c) calc(3*(var(--w) / 3) + var(--p)) var(--p) / 1px var(--w),
  /* horizontal lines*/
   var(--c) var(--p) var(--p) / var(--w)  1px,
   var(--c) var(--p) calc(1*(var(--w) / 3) + var(--p)) / var(--w) 2px,
   var(--c) var(--p) calc(2*(var(--w) / 3) + var(--p)) / var(--w) 2px,
   var(--c) var(--p) calc(3*(var(--w) / 3) + var(--p)) / var(--w) 1px;
  padding:calc(--p);
  background-repeat:no-repeat; 
  background-color: #2196F3;
}
.grid-item {
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
</div>

Answer 2

May be you can set pseudo elements on the grid items.

This pseudos are larger than the grid, to set borders where there is not an item.

This makes necesary several adjusts all over the grid, but at the end you can get more or less your request

The after pseudo makes the vertical lines. It's set to 300% height to make it cover nor only the current element but also extend beyond it. It's an arbitrary value that will work ok for most grids.

And the before pseudo creates the horizontal lines, and the width follows the same criteria

I have added an effect on hover that keeps only the after on the first element, and reduces the height to cover only the parent element

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  overflow: hidden;
  box-shadow: 0px 0px 0px 10px #2196F3;
  margin: 10px;
  border: solid 2px red;
}
.grid-item {
  background-color: lightblue;
  padding: 20px;
  font-size: 30px;
  text-align: center;
  position: relative;
}

.longer {
  grid-column: auto / span 2;
}

.grid-item:after {
  content: "";
  position: absolute;
  width: 2px;
  height: 300%;
  right: -2px;
  top: 0px;
  background-color: red;
  z-index: 1;
}

.grid-container:hover .grid-item:nth-child(n + 2):after {
   background-color: transparent;
}

.grid-container:hover .grid-item:nth-child(1):after {
   background-color: green;
   height: 100%;
  transition: height 3s linear;
}

.grid-item:before {
  content: "";
  position: absolute;
  width: 200%;
  height: 2px;
  left: -2px;
  bottom: -2px;
  background-color: red;
  z-index: 1;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item longer">7</div>