Как расположить списки друг под другом с CSS grid, где каждый элемент списка — ячейка сетки?

Question

[Anikv]

Здравствуйте.

Есть такая сетка

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

На дексктопе в таком виде проблем нет. Но нужно отобразить эти списки в мобильной версии сначала список 1, а под ним список 2.

Как это сделать? Ничего в голову не приходит, кроме как каждой ячейке списка задавать имя и потом в grid-template-areas выставлять нужное положение. Но ячеек может быть много и это будет как-то неправильно выглядеть с таким раздутымgrid-template-areas.

Comments

[Andrej Sharapov]

вам нужно заменить верстку, визуально объединив необходимые ячейки в контейнеры, а при изменении размера экрана ставить их 1 под другой. Можно и флексами сделать, order.

[Anikv]

Andrej Sharapov, тогда получится что список 1 и список 2 смешаются. Нужно чтобы сначала шел список 1 и все его элементы, а потом список 2 и его элементы.

Answer 1

[Ankhena]

Флексами: https://jsfiddle.net/srv97kh5/

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