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 ?

CodePudding user response：

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.

CodePudding user response：

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