estoy tratando de obtener un diseño similar al de pinterest pero no puedo lograrlo,
Aquí está el div de la tarjeta:
<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>y aquí está el div que mapea toda la tarjeta:
<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>probé flex-wrap, probé grid pero no funciona, ¿dónde está mi error, por favor?
Este tipo de disposición se denomina mampostería. Actualmente está implementado en firefox bajo opciones experimentales. También hay un paquete npm para colocar sus elementos en dicha cuadrícula.
Parece dirección flexible: columna; haría el trabajo?