Кладка, как размещение

Question

У меня есть страница категории для интеграции, что-то особенное.

Вот изображение:

Как видите, есть посты. Есть Х постов.

Итак, во-первых, я бы управлял позициями, например, первого 6-го примера (с nth-child), а затем я представил себе использование Javascript для определения числа от -200 до 200 для случайного добавления преобразования: translateY или на полях для публикации.

Вот что я сделал до сих пор:

<div class="category-page__content">
   <div class="category-page__content__header">
       <h1>Newsroom</h1>
       <p>blablabla</p>
   </div>
   <div class="category-page__content__posts">
     <Post>
     <Post>
     <Post>
     <Post>
     ...
   </div>
</div>

Вот глобальная идея HTML.

Затем я сделал это в CSS (здесь SCSS):

.category-page__content__posts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 60px;
  transform: translateY(-350px);
  > * {
   &:nth-child(2) {
     margin-top: 200px;
   }
   &:nth-child(3) {
     margin-top: 770px;
   }
   &:nth-child(4) {
     margin-top: 415px;
   }
 }
}

Но я чувствую, что это немного грязно.

Если у вас есть идея получше, я бы хотел ее услышать.

И, как я уже сказал, для других постов, которые будут следовать после 6 элементов (4 здесь), я представлял себе размещение с помощью Javascript

Answer 1

Направление колонки Flexbox является одним из решений.Удалите все правила селектора nth-child в вашем CSS и измените CSS оболочки на этот.Достигает эффекта с достаточным количеством сообщений.

.category-page__content__posts { 
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 100vh; // whatever max-height you want
  width: 100%;
}