Как реализовать такое?

Question

[quiplunar]

Как реализовать такое:

[][][][]
[       ]
[][][][]
[       ]

-------

[][][]
[     ]
[][][]
[     ]

-------

[][]
[   ]
[][]
[   ]

Comments

[VVS10]

position: fixed; ?

[Froggyweb]

Скачать бесплатный шаблон

[origami1024]

на гридах наверн проще всего

[quiplunar]

Froggyweb, Что за шаблон и зачем?

[Froggyweb]

VVS10, нет

[quiplunar]

VVS10, Неа, не подходит, хочется на гридах

[Froggyweb]

quiplunar, гриды здесь практически никак. с флексбоксом будет проще
только если статику делать, а вдруг заказчик скажет после 3 ряда делать баннер, а на мобильных как?

Answer 1

[Макс]

Самый простой вариант задать в медиа-запросах order для блоков, при верстке с флексбоксами

.block_container{
    display: flex;
    flex-flow: row wrap;
}
/*
[][]
[   ]
[][]
[   ]
*/
.block-1, .block-2{ order: 1}
.banner-1{ order: 2}
.block-3, .block-4{ order: 3}
.banner-2{ order: 4}
/*...*/

/*
[][][]
[     ]
[][][]
[     ]
*/
@media (min-width: 768px){
    .block-1, .block-2, .block-3{ order: 1}
    .banner-1{ order: 2}
    .block-4, .block-5, .block-6{ order: 3}
    .banner-2{ order: 4}
/*...*/
}
/*...*/

Comments

[quiplunar]

А если блоков не ограниченное количество? Если указать положение тллько баннеру будет работать?

[Макс]

quiplunar,
"А если блоков не ограниченное количество?"
использовать :nth-child(...) или сгенерировать на препроцессоре через цикл для максимально возможного количества.

"Если указать положение тллько баннеру будет работать?"
нет, order для каждого элемента должен быть указан, иначе элементы будут в начале/конце

Answer 2

[Арсений Матыцин]

Нус, скажем, ты можешь взять JS, посчитать количество блоков (n), которые на данном вьюпорте вмещаются в строки и повтыкать баннер в подходящие тебе условия n+1 с параметрами, которые выстроят его на всю ширину.

С JS ты можешь нагородить проверок, повесить onresize для перерасчета, но легче, пожалуй, будет на CSS набрать, как Макс +- описал.