TailwindCSS Masonry Grid

Question

готов заплатить с решение проблемы и помощи мне(я не сильно разбираюсь):

допустим есть грид на 5 колонок на 10 элементов:

<div class="columns-5 gap-5">
  <img src="https://i.pinimg.com/736x/3f/e3/f1/3fe3f1fa1b91d1cd799aad2d23030358.jpg" alt="" />
  <img src="https://i.pinimg.com/736x/52/14/cb/5214cb7c42c1f92293da6d2f692af7f2.jpg" alt="" />
  <img src="https://i.pinimg.com/736x/c4/4e/6c/c44e6c1a5d7efbc286cc7037632bc7c5.jpg" alt="" />
  <img src="https://i.pinimg.com/736x/65/7d/79/657d79344d29f5e6ba14b89669b5f80b.jpg" alt="" />
  <img src="https://i.pinimg.com/736x/af/94/cc/af94cce9de827fb425d6594cb7165bf6.jpg" alt="" />
  <img src="https://i.pinimg.com/736x/29/a1/f4/29a1f40332b5858101ada8417164e619.jpg" alt="" />
  <img src="https://i.pinimg.com/736x/ef/a7/fa/efa7fac6d64b3cacbe3cd3334dd08433.jpg" alt="" />
  <img src="https://i.pinimg.com/control2/736x/99/9a/55/999a55f9b3d15ad3976e7831bf31766a.jpg" alt="" />
  <img src="https://i.pinimg.com/736x/be/4f/3e/be4f3ea7e3f45896db1ec9445f6799bd.jpg" alt="" />
  <img src="https://i.pinimg.com/736x/ae/3d/6e/ae3d6e02289013141636239ffbd73718.jpg" alt="" />
</div>

допустим я добавляю еще 5 элементов итого уже 15 элементов на странице с колонками по 5 элементов:

  <div class="p-5 md:p-10">
<div class="columns-5 gap-5">
  <img src="https://i.pinimg.com/736x/3f/e3/f1/3fe3f1fa1b91d1cd799aad2d23030358.jpg" alt="" />
  <img src="https://i.pinimg.com/736x/52/14/cb/5214cb7c42c1f92293da6d2f692af7f2.jpg" alt="" />
  <img src="https://i.pinimg.com/736x/c4/4e/6c/c44e6c1a5d7efbc286cc7037632bc7c5.jpg" alt="" />
  <img src="https://i.pinimg.com/736x/65/7d/79/657d79344d29f5e6ba14b89669b5f80b.jpg" alt="" />
  <img src="https://i.pinimg.com/736x/af/94/cc/af94cce9de827fb425d6594cb7165bf6.jpg" alt="" />
  <img src="https://i.pinimg.com/736x/29/a1/f4/29a1f40332b5858101ada8417164e619.jpg" alt="" />
  <img src="https://i.pinimg.com/736x/ef/a7/fa/efa7fac6d64b3cacbe3cd3334dd08433.jpg" alt="" />
  <img src="https://i.pinimg.com/control2/736x/99/9a/55/999a55f9b3d15ad3976e7831bf31766a.jpg" alt="" />
  <img src="https://i.pinimg.com/736x/be/4f/3e/be4f3ea7e3f45896db1ec9445f6799bd.jpg" alt="" />
  <img src="https://i.pinimg.com/736x/ae/3d/6e/ae3d6e02289013141636239ffbd73718.jpg" alt="" />
  <img src="https://i.pinimg.com/736x/96/e2/c2/96e2c2e6aff556e55e960a0eba449159.jpg" alt="" />
  <img src="https://i.pinimg.com/control2/736x/a5/59/5c/a5595cebb5c0c47bf2d0429a6d2076b5.jpg"  alt="" />
  <img src="https://i.pinimg.com/736x/c7/05/e0/c705e08917c41a6ce169c9e0b5af7b07.jpg"  alt="" />
  <img src="https://i.pinimg.com/736x/b3/f7/de/b3f7dec6a636ee225c204ec9090f0192.jpg"  alt="" />
  <img src="https://i.pinimg.com/736x/83/8c/06/838c0610c2fbab2779e1a9dbbb22e9de.jpg"  alt="" />
</div>

проблема: мне нужно чтобы последние 5 элементов были строго под 10 первыми, а получилось что они перемешались.

надеюсь хорошо обьяснил (можете писать в личку) https://t.me/evalshine

Answer 1

И где они перемешались я не понял? Стоят вроде все ровно под первыми 10-ю элементами?
Я картинки убрал, что бы alt было видно нумерацию для наглядности.
Или я всё же не понял вопроса?

.columns-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}
img {
  max-width: 100%;
  min-height: 100px;
  border: 1px solid;
}

<div class="columns-5 gap-5">
  <img src="" alt="1" />
  <img src="" alt="2" />
  <img src="" alt="3" />
  <img src="" alt="4" />
  <img src="" alt="5" />
  <img src="" alt="6" />
  <img src="" alt="7" />
  <img src="" alt="8" />
  <img src="" alt="9" />
  <img src="" alt="10" />
  <img src="" alt="11" />
  <img src=""  alt="12" />
  <img src=""  alt="13" />
  <img src=""  alt="14" />
  <img src=""  alt="15" />
</div>

БЛОГ НА HUSL

TailwindCSS Masonry Grid

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