Как сделать такую сетку без гавно бутсрапов и прочих приблуд?

Question

[Капитан Какао]

Всем привет друзья, моя религия не позволяет мне юзать бутстрап, и все его аналоги.
Возникла нужда реализовать такое расположение блоков:


Но структура кода должна быть такой:

<div class="wr">
			<div class="i">1</div>
			<div class="i">2</div>
			<div class="i">3</div>
			<div class="i">4</div>
			<div class="i">5</div>
			<div class="i form"></div>
			<div class="i">6</div>
			<div class="i">7</div>
			<div class="i">8</div>
			<div class="i">9</div>
			<div class="i">10</div>
			<div class="i">11</div>
			<div class="i">12</div>
</div>

Можно ли это реализовать на flex-box ?
Что бы не пилить костыли и не задавать каждому элементу position:absolute и координаты, как это делает бутстрап.

Comments

[Сергей Жубартович]

што? бутстрап делает на position:absolute??

[Капитан Какао]

Сергей Жубартович: ну вот здесь я вижу position:absolute

[Сергей Жубартович]

Rad Cor: но я не вижу там бутстрапа
И position устанавливается в атрибут style элементов скриптом. Он никак не связан с css-фреймворком

[alvvi]

Rad Cor: орнул с вас, там вообще-то foundation стоит.

[Капитан Какао]

Илья Ростопка: окей, я рад что порадовал вас. Ну мне показалось бутстрап, все они на одно лицо...

Answer 1

[Сергей delphinpro]

https://codepen.io/delphinpro/pen/bWzGEM?editors=1100

Comments

[Hyubert]

да думал о таком решении, только так не интересно

а вот на флексах без обертки - вот это задача, над которой я подумаю (может добавлю js)

[Сергей delphinpro]

Hyubert: =)) то же самое на флексах https://codepen.io/delphinpro/pen/NjoWze?editors=0100

[Капитан Какао]

Сергей: jxtym очень круто!)

[Hyubert]

Сергей: плюсую

[Hyubert]

Сергей: также зделал )

Answer 2

[Сергей Жубартович]

Ну а вообще - да, можно сделать на флексах
Вот тебе гайд по флексам https://github.com/FrontenderMagazine/a-guide-to-f...

Comments

[Капитан Какао]

Ну ссылка на гайде это не решение вопроса, я вроде бы знаю не плохо flex, но по этому сюда и написал, что не доходит до меня, как же сделать такую сетку.
Вот максимум что получается: https://jsfiddle.net/RadCor/gzhjf68w/

Answer 3

[Артём Ведищев]

Как один из вариантов, без flex:
https://codepen.io/anon/pen/qmgWWQ/
Прошу не судить строго, только учусь.
Переделал исходный код от Hyubert Hyubert.
Но мне больше нравиться идея изменить структуру кода на 3 колонки.

Comments

[Капитан Какао]

Благодарю, но как и писал выше, position:absolute не подходит.
Точнее оно то подходит, но я хочу найти принципиально другое решение)

Answer 4

[Егор Живагин]

Вообще не оборачивая? Неа, невозможно. Особенно на флексах

На флексах вижу решение с тремя рядами только, притом у среднего надо задать направление в колону + flex-wrap + фиксированная высота.

На будущее - Бутстрап не юзает абсолютные элементы в сетке никогда. Он вообще довольно неплохой. Но тут он тоже не особо поможет.