Как переносить grid элементы группами?

Question

[Кирилл]

Есть grid-контейнер с 4 элементами. Использую grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)). При уменьшении экрана непомещающийся элемент переносится на новую строку.

Есть какой-то инструмент, как сделать так, чтобы перенос элементов был только парами? или тройками, если у меня 6 элементов? Кроме способа, если объединять элементы в группы.

Answer 1

[Fyntig]

Так вложи грид в грид. Правда тогда будет переносить сначала по вертикали внутри пары, а потом по горизонтали (если содержимое разное, то после переноса выравнивать будет по суммарной высоте пары). Имхо легче всего запретить перенос внутри пар заменив "minm.." на 50% (тогда конечным видом будет длинная таблица из двух столбцов, если элементов много). Для троек и прочих чисел по тому же принципу