Lazpe Editorial

[danmondra]

🔗 URL: https://lazpe-editorial.vercel.app/

Checklist antes de enviar la PR

• He creado una carpeta con mi nombre de usuario en pruebas/<prueba>/
• No he modificado ficheros fuera de mi carpeta
• Mi proyecto contiene un fichero README.md

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
pruebas-tecnicas	⬜️ Ignored (Inspect)	Visit Preview		Sep 11, 2023 3:16pm

[yosypandriyash]

Increíble <3. Trabajazo!

[NeiderSmith]

Excelente trabajo!

[JeanBaeez]

Muy bueno!

[DyEsSuCr]

como haces el grid de las portadas para que esten una encima de la otra?

[danmondra]

como haces el grid de las portadas para que esten una encima de la otra? - @DyEsSuCr

Puedes usar display grid y calcular la cantidad de filas que debe haber y el tamaño de estas, teniendo un valor estático que sería el número de columnas. Harías lo siguiente en el contenedor grid:

Estableces las columnas con el valor estático (se puede calcular dinámicamente, pero es más difícil)
grid-template-columns: repeat(5, 5px);

Sabiendo que hay 5 columnas, entonces divides la cantidad de libros (20) / 5 = 4 (esta es la cantidad de filas que debería haber).
Para saber el tamaño de cada fila necesitas saber el tamaño del contendor y la cantidad de filas que va a haber, entonces si el contendor mide 100px de height, lo divides entre la cantidad de filas. 100 / 4 = 25 (esto es la altura de cada libro)

Esto lo haces programáticamente para que se haga el cálculo y después se agregue al DOM.
grid-template-rows: repeat(4, 25px);

Si quieres verlo en detalle, lo hago en este archivo: BooklistGrid.jsx

En el elemento "ul" puedes ver que agrego las filas al grid, esas filas las saco de un custom hook, ahí está toda la lógica, espero te ayude, saludos.