我怎樣才能通過順風獲得類似 pinterest 的布局並做出反應？

Question

我正在嘗試獲得類似 pinterest 的布局，但我無法實現，

這是我想要的：

這是我得到的：

這是卡片的 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>

這是 map 所有卡的 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 中實現。 還有一個npm package用於在這樣的網格中定位元素。

Answer 2

好像是 flex-direction: column; 會做這份工作嗎？