Construir interfaces reutilizables es una de las prácticas más eficientes en el desarrollo frontend. Cuando ya cuentas con una estructura previa bien organizada, crear nuevas vistas se convierte en un proceso ágil donde solo ajustas los elementos necesarios. Eso es exactamente lo que ocurre al armar la pantalla de My Orders partiendo de componentes ya existentes.
¿Cómo reutilizar una estructura previa para una nueva pantalla?
El punto de partida es tomar el código de una clase anterior que ya contiene una estructura similar. En este caso, la pantalla de My Orders comparte gran parte del layout con la vista del carrito de compras. El proceso es directo:
- Copiar el código base de la vista anterior.
- Eliminar las cards que no se necesitan.
- Conservar únicamente la card principal que servirá como plantilla para cada orden.
Una vez hecho esto, el siguiente paso es limpiar los estilos que pertenecían exclusivamente a la pantalla del carrito. Esto incluye remover el background color, el padding adicional y el border radius que se habían aplicado previamente [01:07]. También se eliminan los estilos específicos de shopping cart que no aplican para esta nueva vista.
¿Cómo agregar un ícono de flecha usando CSS Grid?
La pantalla de My Orders necesita una flecha indicadora a la derecha de cada tarjeta. Para incorporarla se añade una etiqueta de imagen dentro de la card del componente Order, buscando el ícono de tipo arrow en la colección de íconos disponible [02:06].
El detalle importante está en la configuración de CSS Grid. La card originalmente usaba un display grid con dos columnas definidas como auto y 1fr. Al agregar la flecha como un tercer elemento, es necesario actualizar la definición del grid para incluir una tercera columna [02:42]:
css
grid-template-columns: auto 1fr auto;
- La primera columna (
auto) se ajusta al contenido de la imagen del producto.
- La columna central (
1fr) ocupa el espacio restante con la información de la orden.
- La tercera columna (
auto) acomoda la flecha sin ocupar más espacio del necesario.
Con este cambio, la flecha se posiciona correctamente al lado derecho de cada tarjeta.
¿Cómo ajustar el espaciado entre tarjetas duplicadas?
Después de cambiar el título a My Orders y duplicar la tarjeta varias veces para simular múltiples órdenes, es común notar que el espaciado vertical entre elementos resulta excesivo. En este caso, el margin bottom de cada card estaba configurado en veinticuatro píxeles [03:33].
La solución es reducirlo a la mitad para lograr una separación más equilibrada. Para hacerlo de forma rápida, se utiliza el atajo de búsqueda Command + F (o Ctrl + F en Windows) dentro del editor, ubicando todas las instancias de 24px y reemplazándolas por 12px.
¿Qué buenas prácticas se aplican en este proceso?
- Reutilización de componentes: partir de código existente ahorra tiempo y mantiene consistencia visual.
- Limpieza de estilos innecesarios: eliminar propiedades CSS que no corresponden a la nueva vista evita conflictos y reduce el peso del código.
- Uso de grid-template-columns con valores mixtos: combinar
auto y 1fr permite crear layouts flexibles donde cada columna se adapta a su contenido.
¿Qué resultado se obtiene?
Al finalizar estos ajustes, la pantalla de My Orders queda completamente funcional con tarjetas que muestran la información de cada orden, acompañadas de una flecha de navegación alineada a la derecha. Todo construido con CSS Grid y basado en una estructura previamente diseñada.
Cuéntanos cómo vas con la construcción de tus pantallas y comparte tus avances en los comentarios.
