Как сверстать отступ сверху у этой чудной HTML структуры (кирпичная кладка — адаптив)?

Question

[Cheizer]

Ребята, помогите пожалуйста, всю голову сломал, уже какой день бьюсь и не могу никак сделать отступ сверху в 70зч этой чудной верстки. Задача такая, что бы по высоте все это было в 100vh, НО внутри блока должен быть отступ сверху в 70px. Остальная "кирпичная кладка должна занимать все остальное пространство по высоте и ширине, вроде с горем пополам сделал эту структуру, все адаптивно и по высоте норм, но если добавляю отступ, все это не влезает в 100vh :( помогите пожалуйста!

Есть заготовка https://codepen.io/Cheizer/pen/RZOXMG как сделать отступ сверху в 70px что бы все влазило в 100vh по высоте?

Comments

[one_day]

а как же calc?
calc(100vh - 70px)

[cssfish]

да... чтоб 70px сверху сделать, способов дочерта, начиная с банальнейшего вложенного блока с маржином сверху.

Answer 1

[Klein Maximus]

Можно через flex: https://jsfiddle.net/upj1oa1m/6/

Comments

[Марти Макфлай]

Тоже хотел флексы предложить, хорошее решение.

[Cheizer]

Благодарю!! А то я даже на flex наворотил ужос, только вникаю в них.

Answer 2

[Максим]

на ютубе есть видео о css-grid -в 5 строк реализуется
либо js плагины типа - masonry

Comments

[jeruthadam]

гриды рано

Answer 3

[Astrohas]

.stranniy-block-wrapper{
    box-sizing: border-box;
    height: 100vh;
    padding-top: 70px;
}

насчет кирпичей, можно сделать тремя способами:
1) Masonry
2) Вручную разбить на блоки и субблоки
3) Таблицы (!)

Comments

[Cheizer]

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