Как выровнять строки по вложенным сеткам - PullRequest
Новая
       56

Как выровнять строки по вложенным сеткам

1 голос
/ 21 октября 2019

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

Когда начинается новая строка, я бы хотел, чтобы она выровнялась со строками из других вложенных сеток.

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

Желаемый результат:

enter image description here

Вот это Codepen 

.grid,
.sub-grid {
  display: grid;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.sub-grid {
  align-content: flex-start;
  grid-auto-rows: minmax(30px, auto);
}

.row {
  border-bottom: 1px solid #000;
}
<div class="grid">
  <div class="sub-grid">
    <div class="row">Row 1</div>
    <div class="row">Row 2</div>
  </div>
  <div class="sub-grid">
    <div class="row">Row 1</div>
    <div class="row">Row 2</div>
    <div class="row">Row 3</div>
    <div class="row">Row 4</div>
    <div class="row">Row 5</div>
    <div class="row">Row 6</div>
  </div>
  <div class="sub-grid">
    <div class="row">
      Row 1 contents is longer<br />
      But the next<br />
      row should begin<br />
      inline with another row<br />
    </div>
    <div class="row">
      Row 2<br />
      I should align with another row
     </div>
    <div class="row">Row 3</div>
    <div class="row">Row 4</div>
    <div class="row">Row 5</div>
  </div>
</div>
...