Css Сортировка и категоризация случайных данных

Question

Скажем, у вас есть следующие точки данных, которые выгружаются из базы данных или файла, размер каждого элемента, представляющий сумму чего-либо (часы, пиццы, что угодно) ...

И вы хотели бы организовать данные по категориям, например , используя CSS ...

Как бы вы это сделали?

Я попробовал метод grid shepard , используя grid-row, но вместо этого получил ...

Спасибо!

PS ответ на вопрос ... Моя интуиция заключается в том, что CSS будет быстрее, чем JS (... перемещение каждого элемента в соответствующий flexbox, который мог бы сортировать элементы строки по горизонтали). Это правда? Возможно ли, что CSS будет быстрее в наборе данных из тысяч элементов?

Answer 1

Вы можете использовать flexbox с order.

Это руководство для flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

проверить этот образец :

.wrapper {
  display: flex;  
  flex-flow: row wrap;
}

.wrapper > * {
  padding: 10px;
  flex: 1 0 100%;
}

.o-1,.o-3,.o-5,.o-7 {
  background: gold;
}

.o-2,.o-4,.o-6 {
  background: hotpink;
}

.o-1 { order: 1; } 
.o-2 { order: 2; }
.o-3 { order: 3; }
.o-4 { order: 4; }
.o-5 { order: 5; }
.o-6 { order: 6; }
.o-7 { order: 7; }

<div class="wrapper">
  <aside class="o-1">1</aside>
  <aside class="o-3">3</aside>
  <aside class="o-2">2</aside>
  <aside class="o-4">4</aside>
  <aside class="o-7">7</aside>
  <aside class="o-5">5</aside>
  <aside class="o-6">6</aside>
</div>