NEXT.JS WebApp: - Quiero alinear divs de tal manera que se vea como este clon de hulu
código aquí
Código JS: -
<div className={styles.div1}> <Link href={`/posts/${slug}`} className={styles.link}> <div className={styles.div2}> <h1 className={styles.h1}>{title}</h1> </div> </Link> </div>Código CSS: -
.div1 { background: linear-gradient(to right, rgb(255, 118, 193), rgb(168, 86, 255); width: 40vw; margin:1vh; height: 15vh; border: #000000 1px; border-radius: 8px; overflow: hidden; border: 1px solid rgb(0, 0, 0); padding: 1em; justify-content: center; align-items: center; align-content: center; } .div3 { display: flex; flex-direction: row; justify-content: center; align-items: center; text-align: center; cursor: pointer; float: left; overflow: hidden; }Salida después de agregar este CSS