So, you want to add borders to your grid, but only between the cells, not around the grid itself. This is surprisingly difficult, as targeting grid-gaps with CSS is not possible. A common workaround is to give the grid container a background color, and make a very small grid-gap between the cells, so that the background becomes the border. The CodePen below uses this solution.

This can work, but if you want dotted or dashed borders, you’re out of luck. You are also stuck with the small grid-gap. If you want a bigger gap, you will have to fake it using paddings or similar. And if you want the whole grid to be transparent in order to show the background, another solution is needed.

Another way to achieve inner borders, which lets you keep your grid-gap, is to turn the ::before and ::after pseudo elements of the grid cells into horizontal and vertical borders. Since we’ll be using absolute positioning of the pseudo-elements, and since absolute positioned elements are positioned relative to their nearest positioned ancestor, we need to make all grid cells positioned. This shouldn’t have any side-effects, as the cells’ positions are fixed in the grid. We also need to make sure overflow is visible (which it should be by default). For the purpose of this demonstration, we’ll give the cells a background color as well.

.grid > * {
  position: relative;
  overflow: visible;
  bakcground-color: #ccc;
}

Let’s say you have a 3-column grid with a grid-gap of 20px. Targeting cells in the second and third column using the pseudo-class :nth-child, we can add grid-lines to the left of each cell. Since we are placing the border on the pseudo-element ::before instead of the cell itself, we can offset it to the left without affecting the cell. We set the height of the pseudo-element equal to the cell heigh pluss the gap height using calc().

.grid > :nth-child(3n+2)::before,
.grid > :nth-child(3n+3)::before {
  content: '';
  position: absolute;
  top: 0;
  left: -10px;
  height: calc(100% + 20px);
  border-left: 1px solid red;
}

The result can be seen below. Not bad, but the grid lines extend below the bottom of the last row.

We could fix this by targeting the last row with :nth-child and making the lines 100% rather than calc(100% + 20px) there, but since we don’t necessarily know how many rows we will have, this is not the best solution. A better way is to make an exeption to the the first row, and let all the following rows have the same css.

/* Vertical lines to the left of cells in the top row */
.grid > :nth-child(2)::before,
.grid > :nth-child(3)::before {
  content: '';
  position: absolute;
  top: 0;
  left: -10px;
  height: 100%;
  border-left: 1px solid red;
}

/* Vertical lines to the left of cells in all other rows */
.grid > :nth-child(3n+5)::before,
.grid > :nth-child(3n+6)::before {
  content: '';
  position: absolute;
  top: -20px;
  left: -10px;
  height: calc(100% + 20px);
  border-left: 1px solid red;
}

Now we’re getting somewhere!

For the horizontal grid lines, we’ll use the ::after pseudo-element.

/* Horizontal lines above cells in the first column */
.grid > :nth-child(3n+4)::after {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  border-top: 1px solid red;
}

/* Horizontal lines above cells in all other columns */
.grid > :nth-child(3n+5)::after,
.grid > :nth-child(3n+6)::after {
  content: '';
  position: absolute;
  top: -10px;
  left: -20px;
  width: calc(100% + 20px);
  border-top: 1px solid red;
}

Voilà!

The complete code can be found in the CodePen below.