Is there a way to stretch a grid item over the grid gap?

Question

I have a container and a child

.container {
  display: grid;
  grid-template-columns: repeat(21, 1fr);
  gap: 20px;
  width: 100%;
}

.container .child {
  grid-column: 1/ 4;
}

Is there a way to bring the .child next to column 5 (so to column 4 plus the 20px)

Answer 1

According to the MDN docs :

In terms of grid sizing, gaps act as if they were a regular grid track however nothing can be placed into the gap. The gap acts as if the grid line at that location has gained extra size, so any grid item placed after that line begins at the end of the gap.

Therefore you have to overlap your content above that gap with margin-right: -20px

.container {
  background: green;
  display: grid;
  height: 200px;
  grid-template-columns: repeat(21, 1fr);
  gap: 20px;
  width: 100%;
}

.container .child {
  grid-column: 1/ 4;
  background: orange;
  margin-right: -20px;
}

<div class="container">
  <div class="child" />
</div>