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

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

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

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

Буду благодарен за мысли и идеи.
  • Вопрос задан
  • 4630 просмотров
Решения вопроса 2
profesor08
@profesor08 Куратор тега CSS
Если блоки не собираются рандомно, то можно гидами обойтись, если рандомно, то masonry. На гридах примется разметить позиции блоков и задать блокам имена.
Ответ написан
Комментировать
@FKV
Фоновое продолжение блоков, которые выходят за контентную часть можно сделать через псеводэлементы before и after. Для контентной части grid.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Если исключительно на CSS - тогда CSS Grid - идеальное решение

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы