Buenas,
Me permito abrir una issue para aclarar una duda en el CSS que no está muy clara. De hecho, se le ve dubitativo al propio Miguel durante el directo.
También me he permitido traladar el codigo a un sandbox por si alguien quiere probar rapidamente el cambio al activar y desactivar el flex container.
WHY IS AN ISSUE:
El flex container que envuelve al grid container hace que el grid se limite a dos columnas, y pase a 1 en pantallas pequeñas. Pero a mi parecer elimina el efecto repeat autofit min max del grid.
Buenas, Me permito abrir una
issue
para aclarar una duda en el CSS que no está muy clara. De hecho, se le ve dubitativo al propio Miguel durante el directo. También me he permitido traladar el codigo a un sandbox por si alguien quiere probar rapidamente el cambio al activar y desactivar el flex container.https://codesandbox.io/s/headless-paper-m7i8r4?file=/src/components/Products.css
Para enfatizar el efecto he aumentado el
max-width
del#root
a 1200pxCODE: Las líneas de código son las siguientes: https://github.com/midudev/aprendiendo-react/blob/a75a5d5d139e481c117bc77febc66c3c6f94b84b/projects/06-shopping-cart/src/components/Products.css#L1-L6
ISSUE: Un contenedor flex envuelve a un grid
WHY IS AN ISSUE: El flex container que envuelve al grid container hace que el grid se limite a dos columnas, y pase a 1 en pantallas pequeñas. Pero a mi parecer elimina el efecto
repeat autofit min max
del grid.MEDIA Flex container desactivado Screencast from 17-02-2023 09:37:05.webm Flex container activado
Gracias de antemano