i'm trying to get a pinterest-like layout but i cannot achieve it,
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 ?
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.
It seems like flex-direction: column; would do the job?