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

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)

CodePudding user response：

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 >
  <div  />
</div>

CodePudding user response：

If you want .child next to the column 5 i.e column 4 plus the 20px as you mentioned.

The easy way around is to add margin-right: -20px to the child

Hope it helps!