Как сделать такое автоматическое распределение блоков?

Question

[Андрей]

В контейнере может быть от 2 до 6 блоков. Как сделать такую сетку в зависимости от количества блоков?

Разметка:
https://jsfiddle.net/1fgaf6zh/

Answer 1

[pegas]

2
3
4
5
6

Comments

[Андрей]

все круто только в IE не пашет

[Андрей]

а блин там же баг с flex-basis там всегда content-box модель

[Андрей]

вот что я искал https://jsfiddle.net/1fgaf6zh/12/

[pegas]

Андрей: Раз вы трепетный, а что если у пользователя нет js ?)

[Андрей]

1PeGaS: я еще когда сайты под IE6 оптимизировал делал так чтоб по минимуму js для визуализации было. но по статистике посещения всех ресурсов за 10 лет без js было меньше 0.05% людей и поисковые боты

[Андрей]

Андрей: но котовасия с багами flexbox мне zoom: 1 и почему я до сих пор не ставлю margin-left когда у меня float: left. Ибо в IE5.5 такой margin увеличивается в 2 раза

Answer 2

[Андрей]

https://jsfiddle.net/1fgaf6zh/12/

Answer 3

[Alexander Belov]

https://codepen.io/irinakramer/pen/jcLlp

Comments

[Андрей]

ну нет. задача стоит чтоб автоматически распределять ширину блокам. добавил разметку

[Alexander Belov]

Андрей: Так в чём трабл? Есть row, в нём может быть 2 или 3 блока. Если больше, 3 то формируем второй row. Блокам даём класс в зависимости от того, сколько их (2 или 3).

[Hyubert]

Андрей: Используйте флексбокс, это имено то что Вам надо

[Андрей]

Hyubert: ну видимо моих знаний недостаточно в них. как это реализовать на флекс?

[Андрей]

Alexander Belov: ну вот я и спрашиваю как лучше реализовать эту логику. да и хотелось бы конечно в рамкар разметки которую я выложил

Answer 4

[whoisthere]

FlexBox

Comments

[Андрей]

да я прекрасно знаю как работают флексбоксы

[Андрей]

это не решение задачи

[whoisthere]

Андрей: на флексбоксах можно решить вашу задачу, за автозаполнение родителя отвечает flex-grow

[whoisthere]

Андрей: если вас не устраивает flexbox, вашу задачу можно решить table > table-cell

[Андрей]

whoisthere: вы уверены что вы говорите про решение в рамках одного контейнера? ибо в table это точно не реализуемо ибо в css нет возможности менять colspan

[whoisthere]

Андрей: https://jsfiddle.net/teqmk4ny/

[Андрей]

whoisthere: с сервера приходит неопределенное количество блоков. задача в том чтоб распределить их на клиенте по такой сетке. разметка же есть выше https://jsfiddle.net/1fgaf6zh/

[whoisthere]

Андрей: какая разница сколько блоков к вам придет? ячейки займут 100% родителя, не важно 2 - 4 - 10

[whoisthere]

Андрей: https://jsfiddle.net/1fgaf6zh/1/

[Андрей]

whoisthere: вы видимо не понял вот в этом случае эти 6 ячеек должны располагаться как на картинке №6 но удалив один блок должно превратится в №5

[whoisthere]

Андрей: одним CSS-ом тогда не обойтись.