CSS Сетка: начать новую строку с каждым элементом заголовка - PullRequest
Новая
       10

CSS Сетка: начать новую строку с каждым элементом заголовка

0 голосов
/ 21 апреля 2020

У меня есть модель данных, в которой количество столбцов является гибким, и я хочу преобразовать это в таблицу CSS. Я подумал, что установил бы grid-auto-flow в column, а затем установил grid-column для каждого элемента заголовка в 1, так что он бы начал новую строку, но вывод немного странный. Столбцы значений все перепутаны. Я хочу предотвратить необходимость определения строки сетки для каждого элемента. 

<div class="table">
  <div class="header">h1</div>
  <div class="value">v11</div>
  <div class="value">v12</div>

  <div class="header">h2</div>
  <div class="value">v21</div>
  <div class="value">v22</div>

  <div class="header">h3</div>
  <div class="value">v31</div>
  <div class="value">v32</div>
</div>

CSS: 

.table {
  display: grid;
  grid-auto-flow: column;

  .header {
    grid-column: 1;
  }
}

Вывод 

h1 v11 v22
h2 v12 v31
h3 v21 v32

тогда как мне нужно, чтобы оно было 

h1 v11 v12
h2 v21 v22
h3 v31 v32

См. https://jsfiddle.net/19uLsgmc/

...