css waterfall (masonry) layout only css

возникла необходимость создать сетку по типу "водопад", но самый первый элемент должен занимать две колонки (все остальные элементы 1 колонка) высота первого элемента(слайдера) известна и фиксирована. другие элементы будут менять высоту. необходимо чтобы высота менялась автоматически в зависимости от содержимого.

решил следующим образом через JavaScript меняю высоту элемента

let mainEl = document.querySelector(".page-content");
    let rowHeight = parseInt(
        getComputedStyle(mainEl).getPropertyValue("grid-auto-rows")
    );
    let rowGap = parseInt(
        getComputedStyle(mainEl).getPropertyValue("grid-row-gap")
    );
    let setSpan = el => {
        // Calculate the number of lines that the div needs to span
        el.style.gridRowEnd = `span ${Math.ceil(
            (el.clientHeight + rowGap) / (rowHeight + rowGap)
        )}`;
    };
    document.querySelectorAll(".page-content-item").forEach(setSpan);

пример на codepen https://codepen.io/143477/pen/rNLXMbj?editors=0110

подскажите можно ли создать данную сетку без использования JavaScript only css please