html - How to make a child span the grid from the first to the last gap?

Question

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 last gap, How can I achieve this?

Here's an example of what I want:

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

.grid div {
  grid-column: ???;
}

<div class="grid"> 
  <div></div>
</div>

Answer 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;
}

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

<div class="grid">
  <div></div>
</div>