tkachenkoaanna097

Ну это ш простейшая математика.
Первый элемент стоит на месте.
Второй вы сдвинули на 12px. Он наполз на первый.
И третий сдвинули на 12px.
=> расстояние между вторым и третьим не изменилось.

Значит, третий нужно сдвигать на двойное расстояние.

Через areas

если идти твои путём, то

Как может меняться активный класс, если вы нигде его не меняете?

.element {
    bottom: calc((100% - 100px) * -1);
    /* или я не уверен, но можно попробовать */
    /* bottom: calc(- (100% - 100px) ); */
}

var all_images = Array.from(document.querySelectorAll('.block__item')).map(el => el.dataset.image);

В общем особо не понятно, что тебе надо.
1. Если ты имеешь виду адаптивность, то используй медиазапросы и почитай про nth-child (тут можно выбирать каждый четный, не четный, каждый третий элемент и т.д. и т.п).
2. Или вот тебе еще вариант для размышления

Можно просто сдвинуть через transform: translateY, либо добавить margin/padding соответствующим блокам

Если вы хотите увеличить фон у поделиться просто увеличьте padding, либо добавить width:у .jc-sb div:nth-child(2) если вы хотите чтоб она была прижата то уберите margin: 0 auto; у .container

https://jsfiddle.net/sLbz0qto/

с помощью clip-path

Как-то так наверное:
https://jsfiddle.net/fn8vkzos/7/

Проще всего это реализуется с помощью css columns.

Если блоки случайны, то грид без js вам не поможет.
https://medium.com/@andybarefoot/a-masonry-style-l...

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

В остальных случаях masonry, isotope и т.д.

Не совсем понял в чем именно проблема. Сделал вот такой вариант, остальное можно стилями подогнать как надо:

scrollwheel: false
Неплохой сервис для генерации конифга googlemapbuilder.mynameisdonald.com