Растянуть элемент до конца автоматически рассчитанной сетки, а не только явной сетки - PullRequest
Новая
       4

Растянуть элемент до конца автоматически рассчитанной сетки, а не только явной сетки

3 голосов
/ 03 июля 2019

В сетке CSS вы можете использовать grid-column: 1 / -1, чтобы растянуть элемент по всей явной сетке.Однако, если вы добавляете новые элементы и сетка автоматически имеет больше столбцов, чем указано явно, это не дает того же эффекта.

Можно ли вместо -1 указать любое значение, которое заставит элемент растягиваться до конца сетки?

В следующем примере, поскольку grid-auto-flowустановлен на column, дополнительные элементы добавляют новые столбцы.Я хочу, чтобы элемент .stretch растягивал всю ширину сетки, а не только ширину указанной сетки 3x3. 

.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 Ответ

1 голос
/ 03 июля 2019

One hacky Идея состоит в том, чтобы элемент занимал большое количество столбцов: 

.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>

Обратите внимание, поскольку этот хак работает, только если вы не укажете grid-column-gap и сохраните для неявного нового столбца ширину auto.

Добавление пробелов сломает его: 

.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>

Если неявный столбец отличается от auto, он будет разбит: 

.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>

Если вы хотите учесть пробелы, просто учтите поле и, если вы хотите определить ширину, задайте его для элементов. 

.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>
...