Как сверстать блоки лесенкой адаптивно?

Question

[godsplan]

Пример:

Моя попытка: https://codepen.io/poylar/pen/RwyvwmE
Возможно ли как то расположить эти элементы лесенкой вверх как на скрине через css чтобы при добавление или удаление какого-то кол-ва элеметов ничего не ехало и оступы снизу и сверху от блоков всегда были одинаковыми?Если через css нельзя, то какие есть варианты на js?

Comments

[Максим]

В мобильной версии и для планшетов в вертикальной ориентации этой шляпы не должно быть и всё должно быть столбиком

[godsplan]

Максим с Казахстана, речь не про мобилку а про большее кол-во блоков или меньшее

[Максим]

godsplane, на js не сложно посчитать, всё равно это делается на css и к каждому новому блоку прибааить 20 30px top и right + index

Мне лень делать, я с суток

[godsplan]

Максим с Казахстана, на Js я что то упускаю, мне не хваттает буквально нескольки пикселей чтобы все было идеально.

document.addEventListener("DOMContentLoaded", () => {
  const heroContent = document.querySelector(".hero-content");
  const heroItem = document.querySelectorAll(".hero-content__item");
  heroItem.forEach((elem, index) => {
    elem.style.width = `${heroContent.getBoundingClientRect().width / heroItem.length}px`;
    const form = (heroContent.getBoundingClientRect().height - heroItem[0].getBoundingClientRect().width) / heroItem.length - 1   + 46;
    elem.style.transform = `translateY(-${(form * index) / 2}px)`;
  });
});

На css с 30/40px новому элементу это костыль будет. как определять чтоб элементов будет 5 а не 4, на все случаи жизни прописать nth-chidl?

[Максим]

godsplane, 20/30 это я от фонаря сказал..

[Ankhena]

godsplane, я аналогичное делала для ширины: флексами или гридами разбиваете на равные ячейки. В них абсолютом добавляете карточки.
JS нужен чтобы вычислить "выпираюший" кусок и сделать паддинг на его ширину.

Смещение по высоте - на js и передавать через кастомные.

Зачем второй одинаковый вопрос?

[godsplan]

Ankhena, а есть реф?
Тот вопрос больше про жс и алгоритм, я думал мб есть норм решение с гридами или флексами.

[godsplan]

Ankhena, что значит "В них абсолютом добавляете карточки", то есть в одной ячейке должно быть несколько карточек?какая вообще структура?

[Ankhena]

godsplane, нет, по одной карточке в обертке.

[godsplan]

Ankhena, как то мало инфы, я особо ничего нового не узнал. Можно подробнее?
Абсолют позиционирование с какими координатами должно быть? и как смещать блоки к верху от левого нижнего угла?

[Ankhena]

godsplane, там и нет ничего нового.
Разбить блок на равные ячейки наверняка умеете.
Внутрь вставить слайд абсолютом тоже умеете.
Кстати, можно и без абсолюта. Просто флексом и flex-shrink 0, чтобы слайд спокойно выпирал из родителя.

и как смещать блоки к верху от левого нижнего угла?

Я уже написала выше: варианта без js я не знаю.

[Ankhena]

godsplane, если хотите узнать новое, то вот тут есть о чем помечать https://github.com/w3c/csswg-drafts/issues/1026#is... ;) На данный момент, проблеме это, конечно, не поможет.

[godsplan]

Ankhena, ну мне нужен вариант с жс, если другого нет. В прочем решил проблему, вот код на оценку.
Внутри все карточки абсолютом с left:0;bottom:0;

document.addEventListener("DOMContentLoaded", () => {
  const heroContent = document.querySelector(".hero-content");
  const heroContentInner = document.querySelector(".hero-content-inner");
  const heroItem = document.querySelectorAll(".hero-content__item");
  heroItem.forEach((elem, index) => {
    elem.style.width = `${heroContent.getBoundingClientRect().width / heroItem.length + 100}px`;
    const heroItemWidth = elem.getBoundingClientRect().width * heroItem.length - 1;
    const heroItemHeight = elem.getBoundingClientRect().height * heroItem.length - 1;
    const diffOverflowX = heroItemWidth - heroContentInner.getBoundingClientRect().width;
    const diffOverflowY = heroItemHeight - heroContentInner.getBoundingClientRect().height;
    const cardOffsetX = diffOverflowX / (heroItem.length - 1);
    const cardOffsetY = diffOverflowY / (heroItem.length - 1);
    const moveX = elem.getBoundingClientRect().width - cardOffsetX;
    const moveY = elem.getBoundingClientRect().height - cardOffsetY;
    elem.style.transform = `translate(${moveX * index}px ,-${moveY * index}px)`;
  });
});

[Ankhena]

godsplane,

вот код на оценку

Если клиента устраивает результат, то и славно.