砌体之类的位置

Question

我有一个要集成的类别页面，

这是图片：

如您所见，有帖子。有X个帖子。

因此，首先，我将管理例如第一个示例6（带有nth-child）的位置，然后我想象使用Javascript确定在-200到200之间的数字以随机添加变换： translationY或要发布的页边空白。

这是我到目前为止所做的：

<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是一种解决方案。删除CSS中的所有nth-child选择器规则，并将包装器CSS更改为此。通过足够的帖子获得效果。

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