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

Question

i'm trying to get a pinterest-like layout but i cannot achieve it,

Here is what i want :

and here is what i get :

Here is the div of the card :

<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>

and here is the div that map all the card :

<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>

i tried flex-wrap, i tried grid but it doesn't work, where is my error please ?

Answer 1

This type of layout is called Masonry. It is currently implemented in firefox under experimental options. There is also an npm package for positioning your elements in such a grid.

Answer 2

It seems like flex-direction: column; would do the job?