Равномерная сетка прямоугольников

[7ion]

День добрый.

Есть контейнер, в контейнере блоки. Блоков может быть любое количество. Контейнер может быть любой ширины. Следовательно, количество строк и столбцов заранее неизвестно.

Задача: расположить блоки в контейнере так, чтобы их всегда было одинаковое количество на каждой строке. Если в последней строке не хватает одного-двух блоков, то оставшиеся блоки занимают всю строку.

Два дня курю как Flexbox, так и гриды, и не вижу решения. Флексы могут оставить на последней строке один элемент, что ужасно некрасиво. Гриды тоже, плюс они его не растягивают. Решения нет, или я его не вижу?

Картинка для наглядности.

Edited August 1, 2017 by 7ion

[Xandrito]

А что мешает указать минимальную ширину и захват свободного пространства на флексах

пример

Edited August 1, 2017 by Xandrito

[Igor Schnaider]

Ну, прийдется вычислять количество и делить пополам. Наверное, можно поизвращаться с nth-child, но не уверен. Еще можно так.

[7ion]

В 01.08.2017 в 05:27, Xandrito сказал:

что мешает указать минимальную ширину

Указав 20%, вы жестко засунули 5 блоков на строку.

 

В 01.08.2017 в 04:02, Igor Schnaider сказал:

Ну, прийдется вычислять количество и делить пополам.

А вы предполагаете, что строк всегда две

 

Блоков может быть любое количество. Ширина блоков одинаковая, за исключением последней строки, определяется шириной самого широкого блока (а его ширина определяется контентом). Контейнер любой ширины. Количество строк и столбцов неизвестно. Высота строк может быть разной.

Похоже, без хардкорной яваскриптовой обвязки я тут не обойдусь.

[Igor Schnaider]

2 часа назад, 7ion сказал:

А вы предполагаете, что строк всегда две

Ну, я не телепат. Вы ведь не уточняли вначале.

Вообще, все равно не очень понятно, как должно работать. По вашим условиям, если у нас, например, два блока — они должны быть оба на одной строке или каждый занимает свою строку (ну раз одинаковое количество на каждой строке, как вы написали)? А если три столбца — по одному на три строки или 2-на-1? А если...

В общем, не понятно ;-)

[Xandrito]

Да, не совсем понятно ...

Выложите предполагаемую разметку и наполнение ... и результат который хоте ли бы получить

[SelenIT]

Если известны минимальная ширина блока и разумные границы диапазона ширины контейнера, можно воспользоваться таким подходом. Но вариантов кода придется написать немало.