How To Make A Child Span The Grid From The First To The Last Gap?

I have a parent grid of 12 columns and a gap of 24px between each column. I want to render a child grid that will start from end of column 1 or start from first gap and end to the

Solution 1:

make the element to span from the second column to before the last column then use negative margin:

.grid {
  border: 1px solid;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 24px;
}

.griddiv {
  height: 100px;
  background: red;
  grid-column: 2 / -2;
  margin: 0 -24px;
}

<divclass="grid"><div></div></div>

You can also do it like below:

.grid {
  border: 1px solid;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 24px;
}

.griddiv {
  height: 100px;
  background: red;
  grid-column: 2 / -2;
  width: calc(100% + 48px);
  justify-self: center;
}

<divclass="grid"><div></div></div>