Как расположить блок относительно ширины контейнера?

Хм, по идеи да, но едет если уменьшать ширину окна. это нельзя исправить?

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

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, как то мало инфы, я особо ничего нового не узнал. Можно подробнее?
Абсолют позиционирование с какими координатами должно быть? и как смещать блоки к верху от левого нижнего угла?

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

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

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

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

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

Максим с Казахстана, на 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?

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

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

Какой формулой можно вычислить смещение карточек от левого края до правого?

Akina, о чем конкретно речь?

Какой формулой можно вычислить смещение карточек от левого края до правого?

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

Какой формулой можно вычислить смещение карточек от левого края до правого?

mayton2019, нееет, мне интересны алгоритмы, обещаю больше не скидывать js.
Решение не работает вроде как.

Какой формулой можно вычислить смещение карточек от левого края до правого?

mayton2019, да , это больше для того чтобы я понимал о чем говорю и может быть вам нагляднее было.

Какой формулой можно вычислить смещение карточек от левого края до правого?

Akina,
Получается такой результат с такой формулой:

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

Это учитывая то что я еще умножил на индекс.

Какой формулой можно вычислить смещение карточек от левого края до правого?

Спасибо за ответ. Проблема как раз таки в том какой шаг надо брать если карточки наклыдываются друг на друга? То есть получается нужно какой то offset добавлять, но как его добавить в формулу я не особо понял.
Я пока накидал что-то такое. но это естественно не работает.

const heroContent = document.querySelector(".hero-content-inner");
  const heroItem = document.querySelectorAll(".hero-content__item");
  heroItem.forEach((elem, index) => {
    elem.style.width = `${heroContent.getBoundingClientRect().width / heroItem.length}px`;
    elem.style.left = `${
      (heroContent.getBoundingClientRect().width / 100) * ((100 / heroItem.length) * index) - elem.getBoundingClientRect().width / heroItem.length / 2
    }px`;
  });

Какие есть варианты защиты сайта от клиента который оплатил только половину?

из админки можно полностью экспортировать сайт

Почему YouTube мешает Swiper?

Возможно поможет только если поставить превью сверху на видео и двигать по нему, а по клику превью скрывать и запускать айфрейм

Возможно ли без медиа запроса переносить блоки друг под друга в мобилке без фикс ширины?

Спасибо за ответ, он ведь напрямую относится к теме

Как более красиво записать исключение если элемента не существует?

Да, но тогда придется оборачивать в функцию. И для каждого слайдера создавать отдельную функцию, так как если записать классы в одну функцию то ние не будет работать

Как создать два слайдера Swiper на одной странице?

спасибо что приложил ответ

Как после валидации формы открыть путь прописанный в action?

Во первых: где вы передаете event аргументом в последствии вызывая event.preventDefault() ?
Во вторых: где вы отправляете данные на сервер?

Как реализовать плавное смещение элементов наверх при добавлении нового элемента?

https://codepen.io/poylar/pen/xxjpvpa
не знаю я накидал говнокода, может как то поможет с идеей.