Как разбить блок на колонки?

Question

[Алекс]

Есть строки в которых имеются элементы, разной длинны (классов нет), все ранее было растянуто justify-content: space-between;, теперь требуется выровнять их не меняя верстку. думал прописать вот таким образом (первый пример)


Но вот проблемка (во втором примере) у некоторых иногда появляется еще один блок в самом конце и нужно как то обыграть это. Не доходит как. Или все таки добавлять какой то модификатор к классу контейнера если есть доп. колонка и новыми стилями на большее количество колонок прописать?

Comments

[Максим]

не понятно , вы же сами его добавили 123 этот , вот без этого : https://jsfiddle.net/v5d68u9x/3/

[Алекс]

Максим Ленский, это пример. есть 4 колонки, но у некоторых строк есть пятая небольшая, я это пытался объяснить. Необходимо разбить строку на промежутки но так что бы последняя 5 колонка получается или сжималась или растягивалась в зависимости от ее заполнения, но так что бы оно ровно смотрелось со строками из 4 колонок. Можно ли такое сделать?

Answer 1

[Ankhena]

https://jsfiddle.net/8Lr9f2wu/

Comments

[Павел Антонов]

у автора как бы в одной строке 5 колонок в другой 4, а у вас в обоих 5

[Ankhena]

Павел Антонов, если пустые убрать, ничего страшного не случится, выравнивание останется, границ не будет.
Это на усмотрение автора вопроса.

[Ankhena]

Павел Антонов, вот так с ровными границами https://jsfiddle.net/3y9cazfx/
Но лишний див всё равно должен быть, либо заполненный, либо пустой.

Альтернативы пока вижу такие:
1. Переверстать в таблицы и на этапе формирования добавлять colspan
2. Убрать обертки строк, всему контейнеру задать display grid
3. Не меняя разметки: на js выяснять есть ли 5 ячейка, если нет, добавлять классы соседям для задания правильных границ.