我怎样才能通过顺风获得类似 pinterest 的布局并做出反应？

Question

我正在尝试获得类似 pinterest 的布局，但我无法实现，

Here is what i want :

and here is what i get :

这是卡片的 div :

<div className='border-[1px] border-blanc rounded-[18px] w-[25rem] h-fit justify-between hover:bg-gray-400/5 cursor-pointer '>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

这里是映射所有卡片的 div :

<div className='pt-[5rem] w-[90rem] ml-[2rem] grid grid-cols-3 '>
            {datas.map((e) => (
                    
                <Card posterName={e.posterName} posterUsername={e.posterUsername} content={e.content} likes=           {e.likes} dislikes={e.dislikes} commentsCount={e.commentsCount} key={e.id} id={e.id} repostCount={e.repostCount} image={e.image} />
                    
                ))}
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我试过 flex-wrap，我试过 grid 但它不起作用，请问我的错误在哪里？

Answer 1

这种布局称为 Masonry。它目前在 firefox 中 implemented 处于实验性选项下。还有一个 npm package 用于在这样的网格中定位元素。

Answer 2

好像是flex-direction:专栏；会做这份工作吗？

我怎样才能通过顺风获得类似 pinterest 的布局并做出反应？

How can i get the pinterest-like layout with tailwind and react?

javascript

reactjs

tailwind-css