如何水平呈现项目(砖石布局)？

Question

我想在页面加载时水平地呈现项目，请参阅以下图像

<section
        tabindex="-1"
        class="relative mx-8 mt-10 mb-20 max-w-7xl focus:outline-none sm:mx-16 md:mx-20 lg:mx-24 xl:mx-auto"
    >
        <ul
            class="h-full w-full list-none columns-1 gap-4 space-y-12 overflow-hidden pb-32 md:columns-2 lg:columns-3 lg:gap-8 xl:columns-4"
        >
            <ExploreCard
                v-for="(post, index) in posts.data"
                :key="index"
                :post="post"
                :canLike="this.canLike"
            />
        </ul>       
</section>

Currently

​

​

Expected

​

​

就像这样，

https://reactjsexample.com/rendering-columns-from-a-list-of-children-with-horizontal-ordering/

我正在寻找一个Js，Vue，或CSS解决方案。

Answer 1

我最终得到了一个包解决方案，它的工作非常好！

DaPotatoMan/vue-next-砖石工

，这就是的样子

<masonry
            :cols="{ default: 4, 1024: 3, 768: 2, 640: 1 }"
            :gutter="{ default: 40, 1024: 30, 768: 20 }"
        >
            <div v-for="(post, index) in posts.data" :key="index" class="mb-10">
                <ExploreCard
                    v-for="(post, index) in posts.data"
                    :key="index"
                    :post="post"
                    :canLike="this.canLike"
                />
            </div>
</masonry>

这样，所有的帖子都是以水平顺序呈现的！

Answer 2

我建议您使用网格的顺风类实用程序来创建网格容器：https://tailwindcss.com/docs/display#:~:text=Use%20grid%20to%20create%20a%20grid%20container。

​

​

Answer 3

这是来自@haltersweb的纯CSS的回答。

https://stackoverflow.com/a/37063940/17737657

纯CSS砌体布局

显示:内联块

ul {
    margin-left: .25em;
    padding-left: 0;
    list-style: none;
}
li {
    margin-left: 0;
    padding-left: 0;
    display: inline-block;
    width: 30%;
    vertical-align: top;
}

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
  <li>item 9</li>
</ul>

​

​

显示器: flex

ul {
    margin-left: .25em;
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}
li {
    margin-left: 0;
    padding-left: 0;
    width: 33.3%;
}

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
  <li>item 9</li>
</ul>

​

​