CSS-сетка с данными, сгруппированными по строкам - PullRequest
Новая
       2

CSS-сетка с данными, сгруппированными по строкам

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

В последние несколько часов я проводил тест-драйв display: grid и не нашел рабочего примера того, как сохранить ваши данные сгруппированными по строкам (что кажется очень распространенным вариантом использования). Я пытаюсь заменить макет таблицы на CSS Grid, но не могу его взломать.

Рассмотрим этот HTML: 

<div class="wrapper">
    <div class="row">
         <div class="col1">Short Data</div>
         <div class="col2">Very Much Longer Data</div>
    </div>
    <div class="row">
         <div class="col1">Short Data</div>
         <div class="col2">Regular Data</div>
    </div>
</div>

И этот CSS: 

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

Вышеприведенный CSS будет влиять только на строки, но не на макеты столбцов. Если я вложу другую сетку в каждую строку, то точки данных не будут иметь отношения и не будут расширяться в унисон (до subgrid).

Есть несколько причин, почему это важно для меня:

  1. Мне бы хотелось, чтобы каждая строка представляла собой компонент React, для которого требуется один внешний тег-обертка.
  2. Я зацикливаюсь на наборе данных неизвестной длины, и React требует key на каждой итерации. .
  3. Я хотел бы создать полосы зебры или всплывающие события, которые реагируют на каждую строку.
  4. Моему ОКР не нравятся все дети, живущие рядом друг с другом без какой-либо группировки.

Должен ли я просто использовать хорошие таблицы?

...