HTML & CSS: Позиционирование элементов не зависимо от высоты строки

Question

проблема: Есть 9 элементов и в одной строке 3 элемента и ниже ещё 2 строки по 3 элемента, по середине (у всех строк) элемент с высотой 1000px остальные по 500px и нижние элементы отодвигаются назад из-за того, что высокий блок расширяет строку, мне нужно чтобы эли маленькие нижние блоки независимо от высоты самого высоко элемента в строке двигались максимально возможно вверх (до конца верхнего элемента). Вот мой код, не могу решить как это сделать:

// Код добавления из папки элементов на страницу
if (window.location.pathname.endsWith('gallery_stills.html') || window.location.pathname.endsWith('gallery_animation.html')) {
      const isStills = window.location.pathname.endsWith('gallery_stills.html');
      const contentDiv = document.getElementById(isStills ? 'contents-s' : 'contents-a');
      const folders = ['square', 'poster', 'banner'];
      const mediaType = isStills ? 'stills' : 'animations';
      const fileExtension = isStills ? 'webp' : 'webm';

      const createMediaElement = (src, folder, index) => {
          if (isStills) {
              const img = document.createElement('img');
              img.src = src;
              img.alt = `${folder} ${index}`;
              img.classList.add('stills_img', folder);
              return img;
          } else {
              const video = document.createElement('video');
              video.src = src;
              video.autoplay = true;
              video.loop = true;
              video.muted = true;
              video.playsInline = true;
              video.controls = false;
              video.classList.add('stills_img', folder);
              return video;
          }
      };

      
      const loadMedia = async (folder) => {
          let index = 1;
          while (true) {
              const mediaSrc = `../src/${mediaType}/${folder}/${index}.${fileExtension}`;
              try {
                  const response = await fetch(mediaSrc, { method: 'HEAD' });
                  if (!response.ok) break;
                  const mediaElement = createMediaElement(mediaSrc, folder, index);
                  contentDiv.appendChild(mediaElement);
                  index++;
              } catch (error) {
                  console.error(`Error loading media: ${error}`);
                  break;
              }
          }
      };

      folders.forEach(folder => loadMedia(folder));
}

/* Стили контейнера элементов и самих элементов */
.content_container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 3%;
}

.stills_img {
    margin: 10px;
    border-radius: 10px;
}

.banner {
    width: calc(90% / 3);
    height: 300px;
}

.square {
    width: calc(90% / 3);
    height: 100%;
}

.poster {
    width: calc(90% / 3);
    height: 800px;
}

Answer 1

main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 3em;
  gap: 1em;
}

div {
  border: 1px solid;
}

.long {
  grid-row: auto / span 2;
}

<main>
  <div>1</div>
  <div class=long>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</main>

БЛОГ НА HUSL

HTML & CSS: Позиционирование элементов не зависимо от высоты строки

Ответы (1 шт):