Skip to content

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

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=""></script>
<script src=""></script>

and here is the div that map all the card :

<div className='pt-[5rem] w-[90rem] ml-[2rem] grid grid-cols-3 '>
            { => (
                <Card posterName={e.posterName} posterUsername={e.posterUsername} content={e.content} likes=           {e.likes} dislikes={e.dislikes} commentsCount={e.commentsCount} key={} id={} repostCount={e.repostCount} image={e.image} />
<script src=""></script>
<script src=""></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.