Как получить эффект grid-template-columns макета сетки с переменным количеством столбцов? - PullRequest
Новая
       8

Как получить эффект grid-template-columns макета сетки с переменным количеством столбцов?

2 голосов
/ 06 февраля 2020

У меня есть div, содержащий переменное количество детей. Этот код сгенерирован, и я не могу его изменить. Так что только с CSS мне нужно отобразить div в таблице с двумя строками:

  • Первая строка содержит только первый div (ширина 100%)
  • Другая доля div вторая строка: каждый div будет иметь одинаковую ширину и должен полностью заполнить строку.

Я пробовал с сеткой + grid-template-columns, но использование grid-template-columns не потому, что потому что это предполагает, что я знаю количество столбцов. Например, следующий фрагмент работает, только если есть 4 дочерних элемента 

.parent {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.child:nth-child(1) {
    grid-column: 1/-1;
}
Test with 3 children
<div class="parent" style="background-color:yellow;" >
  <div class="child" style="background-color:red;">1</div>
  <div class="child" style="background-color:blue;">2</div>
  <div class="child" style="background-color:green;">3</div>
</div>
Test with 4 children
<div class="parent" style="background-color:yellow;" >
  <div class="child" style="background-color:red;">1</div>
  <div class="child" style="background-color:blue;">2</div>
  <div class="child" style="background-color:green;">3</div>
  <div class="child" style="background-color:orange;">4</div>
</div>
Test with 5 children
<div class="parent" style="background-color:yellow;" >
  <div class="child" style="background-color:red;">1</div>
  <div class="child" style="background-color:blue;">2</div>
  <div class="child" style="background-color:green;">3</div>
  <div class="child" style="background-color:orange;">4</div>
  <div class="child" style="background-color:purple;">5</div>
</div>

Ответы [ 2 ]

3 голосов
/ 06 февраля 2020

Flexbox может делать то, что я думаю, после 

.parent {
  display: flex;
  flex-wrap: wrap;
  margin-top: 1em;
}

.child {
  flex: 1;
  padding: .25em 0;
  color:white;
  font-size:1.25em;
}

.child:nth-child(1) {
  flex: 1 0 100%;
}
Test with 3 children
<div class="parent" style="background-color:yellow;">
  <div class="child" style="background-color:red;">1</div>
  <div class="child" style="background-color:blue;">2</div>
  <div class="child" style="background-color:green;">3</div>
</div>
Test with 4 children
<div class="parent" style="background-color:yellow;">
  <div class="child" style="background-color:red;">1</div>
  <div class="child" style="background-color:blue;">2</div>
  <div class="child" style="background-color:green;">3</div>
  <div class="child" style="background-color:orange;">4</div>
</div>
Test with 5 children
<div class="parent" style="background-color:yellow;">
  <div class="child" style="background-color:red;">1</div>
  <div class="child" style="background-color:blue;">2</div>
  <div class="child" style="background-color:green;">3</div>
  <div class="child" style="background-color:orange;">4</div>
  <div class="child" style="background-color:purple;">5</div>
</div>
0 голосов
/ 06 февраля 2020

EDIT:

Я думал, что это будет работать: 

.parent {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    grid-auto-columns: 1fr;
}

.child:first-child {
  grid-row: 1;
  grid-column: 1 / -1;
}

.child:not(:first-child) {
  grid-row: 2;
}

Однако, похоже, grid-column: 1 / -1 не работает для автоколонок. Это очень неудачно. Таким образом, лучший способ здесь - использовать flexbox, как уже указывалось.

Предыдущий ответ

Вы должны решить эту проблему следующим образом: 

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

.child:nth-child(1) {
  grid-column: 1/-1;
}

Ключ grid-auto-flow, который установит sh, что любые непредвиденные элементы будут добавлены как дополнительные столбцы. С помощью grid-auto-columns вы можете указать размер автоматически добавляемых столбцов по умолчанию.

...