Как сверстать на CSS подобную адаптивную сетку?

Question

[Александр]

Здравствуйте
Есть надобность сверстать подобную сетку на CSS ка на картинке

spoiler

Контентная часть - ограничена синими линиями, там в разных блоках есть и фото и тексты. Ширина 1200px задана через
"container"
На экранах шире 1200px - должны быть фоновые продолжения блоков (там только цвет заливки, контента нету) - красные и черные.
Сетка должна быть адаптивной - при уменьшении размера разрешения - контентные блоки складываются вертикально.

Сложность возникает совместить фоновые продолжения и контентную часть ( на экранах более 1200).
И плюс блоки разной высоты в контентной части.

Буду благодарен за мысли и идеи.

Comments

[Rustam Bainazarov]

Grid.

[Алексей]

Судя по разным размерам блоков вариант на гридах должен подойти.

[Brad9aga]

Рустам Байназаров, float:left;

[Rustam Bainazarov]

Brad9aga, не выйдет. Смотри наложения:

[Brad9aga]

Рустам Байназаров, это был рофл

[Rustam Bainazarov]

Brad9aga, а-а-а, ну кто же тебя знает!

[Brad9aga]

Рустам Байназаров, таблицы, а вот с помощью таблицы 100% можно
только вот встает вопрос адаптивности ))))1

[Rustam Bainazarov]

Brad9aga, ну ничего, мы тут любители косых решений.

Мне один товарищ доказывал тут, что он полноценную пагинацию на CSS сделал. Полноценную пагинацию на CSS…

[Rustam Bainazarov]

Brad9aga, наслаждайся и ты перепиской в комментариях к вопросу:
Можно ли только ч/з CSS сделать полнофунк-ый pagination?

[Brad9aga]

Рустам Байназаров,так может он в 2033 живет?

[Rustam Bainazarov]

Brad9aga, ты почитай комментарии, он там вообще из XXX века, судя по всему.

[Brad9aga]

Рустам Байназаров, мда, на тактих над прост рукой махнуть и проходить мимо

[Rustam Bainazarov]

Brad9aga, было интересно, что он такое выдумал.

Понятное дело, что он выдумал костыль и что его «пагинация» — глухослепонемой актёр, который пытается играть Черчилля, но всё же.

[Brad9aga]

Рустам Байназаров, если б он свой профиль основной спалил, тогда было бы проще судить, что за клиника

[Rustam Bainazarov]

Brad9aga, он предусмотрительно не стал размещать свои контакты и пр.

Ну, главное, чтобы он в приличном обществе такую ерунду не сказал.

[Brad9aga]

Рустам Байназаров, это уже не наша забота)

[Rustam Bainazarov]

Brad9aga, ну как. Всё равно стыдно за него.

Answer 1

[profesor08]

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

Answer 2

[FKV]

Фоновое продолжение блоков, которые выходят за контентную часть можно сделать через псеводэлементы before и after. Для контентной части grid.

Answer 3

[Александр Осадчий]

Если исключительно на CSS - тогда CSS Grid - идеальное решение

Но в гридах отдельным колонкам нужно будет присвоить свои позиции и размеры...
+ Так-же прописать адаптивный вариант

Вот несколько вариантов (заготовок):
https://jsfiddle.net/ischenkodv/t337a0br/
https://jsfiddle.net/girlie_mac/QUPFS/