Stretch an element to the end of the automatically calculated grid, not just the explicit grid

问题

In a CSS grid, you can use grid-column: 1 / -1 to stretch an element across the entire explicit grid. However, if you add new elements and the grid automatically has more columns than explicitly stated, this doesn't have the same effect.

Is there any value I can put instead of -1 that will force the item to stretch all the way to the end of the grid?

In the following example, because grid-auto-flow is set to column, the extra elements add new columns. I want the .stretch element to stretch the entire width of the grid, not just the width of the specified 3x3 grid.

.grid {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: column;
  width: 300px;
}

.item {
  border: 1px solid red;
  padding: 15px;
}

.stretch {
  grid-column: 1 / -1;
}

<div class="grid">
  <div class="stretch item">
    Stretched
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
</div>

回答1:

One hacky idea is to make the element span a large number of columns:

.grid {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: column;
  width: 300px;
}

.item {
  border: 1px solid red;
  padding: 15px;
}

.stretch {
  grid-column: span 20;
}

<div class="grid">
  <div class="stretch item">
    Stretched
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
</div>

<div class="grid">
  <div class="stretch item">
    Stretched
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
</div>

Pay attention as this hack works only if you don't specify grid-column-gap and you keep the implicit new column to have auto width.

Adding gaps will break it:

.grid {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap:1px;
  grid-auto-flow: column;
  width: 300px;
}

.item {
  border: 1px solid red;
  padding: 15px;
}

.stretch {
  grid-column: span 20;
}

<div class="grid">
  <div class="stretch item">
    Stretched
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
</div>

<div class="grid">
  <div class="stretch item">
    Stretched
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
</div>

Making the implicit column different from auto will break it:

.grid {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns:10px;
  grid-auto-flow: column;
  width: 300px;
}

.item {
  border: 1px solid red;
  padding: 15px;
}

.stretch {
  grid-column: span 20;
}

<div class="grid">
  <div class="stretch item">
    Stretched
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
</div>

<div class="grid">
  <div class="stretch item">
    Stretched
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
</div>

If you want to consider gaps simply consider margin and in case you want to define width define it on the elements.

.grid {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: column;
  width: 300px;
  margin-left:-10px;
}

.item {
  border: 1px solid red;
  padding: 15px;
  margin-left:10px;
}

.stretch {
  grid-column: span 20;
}

.item:nth-child(n + 8) {
  border-color:blue;
  min-width:40px;
}

<div class="grid">
  <div class="stretch item">
    Stretched
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
</div>

<div class="grid">
  <div class="stretch item">
    Stretched
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
</div>

来源：https://stackoverflow.com/questions/56875326/stretch-an-element-to-the-end-of-the-automatically-calculated-grid-not-just-the

标签

html

css

css-grid