CSS grid: border for incomplete lines

Question

Is there a way to have a CSS ( display: grid) grid that has a 1px border around all elements and also fills in incomplete lines? The installation approach background-colordoes not appear to be a viable solution.

My goals are to have a grid without a gray area in a piece of code where there are no elements, and the grid lines always go through the whole table. This should work for flexible combinations of elements in a row.

It seems that for there is no element below , and for there are no special pseudo-classes, and does not have an element on the right , so that this work works in flexible layouts because the latter type has too little information about the grid to use for styling.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  background-color: #d4d4d4;
  grid-gap: 1px;
  border: 1px solid #d4d4d4;
}

.grid > div {
  padding: 15px;
  text-align: center;
  background-color: white;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Run codeHide result

Answer 1

• background-color
• ( ).

:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  background-color: white;
  grid-gap: 1px;
  border: 1px solid #d4d4d4;
}

.grid > div {
  padding: 15px;
  text-align: center;
  background-color: inherit;
  border-right: inherit;
  margin-right: -1px;
  border-bottom: inherit;
  margin-bottom: -1px;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Hide result