Diseñar una sección de rentas destacadas responsiva implica reorganizar tarjetas que en móvil se apilan en columna y en escritorio se distribuyen en filas con tamaños proporcionales. Aquí aprendes a estructurar divs, aplicar clases utilitarias de Tailwind y ajustar breakpoints para replicar un diseño tomado de Figma sin romper la versión móvil.

Esta guía es útil si estás construyendo tu primera página web responsiva y quieres entender cómo agrupar elementos, controlar tamaños con width y height, y resolver problemas comunes de espaciado entre tarjetas.

Cómo agrupar tarjetas en un layout responsivo con divs

El primer paso es revisar el diseño en Figma y notar que en escritorio las tarjetas no están en columna como en móvil, sino agrupadas. Chicago queda como una tarjeta independiente, mientras que Los Ángeles, Miami y Bali se agrupan en otro contenedor.

Para lograrlo, dejas el div de Chicago intacto y creas un nuevo div contenedor donde mueves los otros tres elementos. Dentro de ese contenedor, agrupas Miami y Bali en otro div anidado, porque esa pareja se comporta en columna mientras Los Ángeles ocupa su propio espacio al lado.

¿Por qué agrupar elementos en divs anidados? Porque cada grupo necesita comportarse distinto según el breakpoint: unos en fila, otros en columna. Sin esa jerarquía, las clases de Tailwind no pueden aplicar el layout correcto.

Cómo aplicar flex solo en pantallas grandes

Al nuevo div contenedor le pasas la clase lg:flex para que las tarjetas se acomoden una al lado de la otra únicamente en escritorio. En móvil siguen apiladas en columna, que es el comportamiento por defecto de un div en bloque.

También defines un ancho de un tercio (w-1/3) para distribuir el espacio horizontal entre los grupos. Así Los Ángeles ocupa una porción y el grupo Miami-Bali ocupa otra.

Cómo controlar el ancho y alto de las tarjetas

La tarjeta de Los Ángeles inicialmente tenía un width de 96, pero ese valor no funciona en pantallas grandes. La solución pasa por usar h-full y dejar el alto en automático para que la tarjeta crezca según su contenedor padre.

• Asignas w-full al contenedor exterior para que ocupe todo el espacio disponible.
• Cambias h-full por h-auto en la tarjeta para que crezca de forma natural.
• Aplicas un background temporal de color para visualizar cómo se comporta cada div mientras ajustas estilos.

Este truco del fondo de color es clave: te permite ver los límites reales de cada contenedor antes de eliminarlo al final. En el código aparece como un div rosita que sirve solo de referencia visual.

Cómo agregar padding sin romper el diseño móvil

La sección completa de rentas destacadas necesita respiración respecto al borde del navegador. Le agregas lg:px-6 para que el padding horizontal aparezca solo en escritorio y no afecte la versión móvil.

Dentro del contenedor también pruebas space-x-4 para separar las tarjetas entre sí, aunque más adelante descubres que ese enfoque tiene un problema.

Por qué space-x no funciona y cómo reemplazarlo con margin

Al inspeccionar la versión móvil notas que el espaciado entre tarjetas no se respeta. La razón es que space-x aplica entre hermanos directos del mismo div, pero al anidar grupos en contenedores distintos, esos elementos dejan de ser hermanos directos.

¿Cuándo usar margin en lugar de space? Usa margin-bottom cuando tus elementos están repartidos en divs anidados o cuando necesitas espaciado vertical en móvil que no dependa de la posición entre hermanos.

La solución es eliminar las clases space y agregar mb-8 (margin-bottom de 8) a cada sección antes del breakpoint lg. Para hacerlo eficiente usas el cursor multilínea con Alt + clic y editas varias líneas a la vez.

Cómo escalar tipografía en breakpoints grandes

Los títulos en móvil ya tienen buen tamaño, pero en escritorio conviene aumentarlos. Aplicas lg:text-lg a los encabezados de cada tarjeta para que crezcan solo en pantallas grandes.

De nuevo el cursor multilínea acelera el trabajo: seleccionas las líneas de Los Ángeles, Miami, Bali y Chicago al mismo tiempo y agregas la clase en una sola operación.

Cómo personalizar la tarjeta de Chicago

Chicago tiene un comportamiento especial. Le agregas lg:bg-center para centrar la imagen de fondo y mejorar la composición visual.

El color de texto también cambia, pero como esa tarjeta usa una clase extraída con la directiva @apply, agregas la clase text-black directamente en el HTML para sobreescribir solo en ese caso, sin tocar la clase global compartida.

Qué herramientas de Tailwind aceleran este flujo

A lo largo del proceso aparecen utilidades que vale la pena tener identificadas:

• lg:flex para activar flexbox solo en escritorio [04:30].
• w-1/3 para repartir tarjetas en tercios horizontales [04:50].
• h-auto y w-full para que las tarjetas se adapten al contenedor padre [07:20].
• lg:px-6 para padding horizontal solo en pantallas grandes [08:40].
• mb-8 como reemplazo de space-x cuando hay divs anidados [10:15].
• lg:text-lg para escalar tipografía en escritorio [11:30].
• lg:bg-center para centrar imágenes de fondo [12:40].
• Directiva @apply para reutilizar clases y sobreescribir puntualmente con utilidades inline [12:55].

Con estos ajustes la sección de rentas destacadas queda lista en su versión escritorio. Lo único que falta para cerrar el proyecto es trabajar la navbar. ¿Te animas a comentar qué breakpoint sueles usar como punto de quiebre principal en tus proyectos?