возникла необходимость создать сетку по типу "водопад", но самый первый элемент должен занимать две колонки (все остальные элементы 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