Блог

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

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

Как вы можете видеть, есть posts. Есть X сообщений.

Итак, сначала я бы управлял позициями, например, в 6-м первом примере (с n-м дочерним элементом), а затем я представил, как использую Javascript для определения числа от -200 до 200, чтобы случайным образом добавить transform: translateY или margin-top для публикации.

Вот что я сделал на данный момент :

 <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);
  > * {
   amp;:nth-child(2) {
     margin-top: 200px;
   }
   amp;:nth-child(3) {
     margin-top: 770px;
   }
   amp;:nth-child(4) {
     margin-top: 415px;
   }
 }
}
  

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

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

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

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%;
}