Создание высоты каждой ячейки сетки CSS зависит от самой большой ячейки его ряда - PullRequest
Новая
       2

Создание высоты каждой ячейки сетки CSS зависит от самой большой ячейки его ряда

0 голосов
/ 10 января 2019

В настоящее время я работаю над созданием сетки, которая будет содержать различное количество элементов в каждой ячейке, и в настоящее время я сталкиваюсь с проблемами, связанными с соответствующим изменением высоты ячеек в каждой строке:

Мне бы хотелось, чтобы высота каждой ячейки равнялась высоте самой большой ячейки в каждой строке, но в ее нынешнем виде высота каждой ячейки зависит от самой высокой ячейки во всей сетке.

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

.grid {
  background-color: red;
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
}

.grid-column {
  background-color: blue;
  display: grid;
  grid-auto-rows: 1fr;
  grid-auto-flow: row;
  margin: 2px;
  box-sizing: border-box;
}

.grid-row {
  background-color: green;
  margin: 2px;
  box-sizing: border-box;
}

.item {
  background-color: white;
  margin: 2px;
  box-sizing: border-box;
  display: block;
}
<div class="grid">
  <div class="grid-column">
    <div class="grid-row"></div>
    <div class="grid-row"></div>
    <div class="grid-row"></div>
  </div>
  <div class="grid-column">
    <div class="grid-row">
      <span class="item">item 1</span>
      <span class="item">item 2</span>
    </div>
    <div class="grid-row"></div>
    <div class="grid-row"></div>
  </div>
  <div class="grid-column">
    <div class="grid-row"></div>
    <div class="grid-row">
      <span class="item">item 3</span>
      <span class="item">item 4</span>
    </div>
    <div class="grid-row"></div>
  </div>
  <div class="grid-column">
    <div class="grid-row"></div>
    <div class="grid-row"></div>
    <div class="grid-row"></div>
  </div>
  <div class="grid-column">
    <div class="grid-row"></div>
    <div class="grid-row"></div>
    <div class="grid-row">
      <span class="item">item 5</span>
      <span class="item">item 6</span>
      <span class="item">item 7</span>
      <span class="item">item 8</span>
    </div>
  </div>
</div>
...