¿Qué clase cambia la rejilla a 2 columnas en pantallas medianas?

El prefijo md: aplica la utilidad desde el breakpoint mediano en adelante.

Tailwind CSS

Layout responsive con Flex y Grid en Tailwind

Aprende a construir estructuras adaptables combinando flexbox, grid y breakpoints con utilidades claras y mantenibles.

¿Cuánto sabes de Tailwind CSS?

📘 Teoría

Cuándo usar Flex

Flex es ideal para alinear acciones, barras, cabeceras o grupos donde el eje principal está claro.

Con clases como flex, items-center y justify-between resuelves alineaciones típicas de UI en segundos.

Utilidades como gap-3 y flex-wrap ayudan a mantener limpieza visual sin crear CSS adicional.

Si el contenido crece o cambia, Flex suele comportarse de forma predecible en interfaces dinámicas.

Un eje principal bien definido.
Alineación rápida de elementos en filas o columnas.
Excelente para barras de navegación y zonas de acciones.

Cuándo usar Grid

Grid destaca cuando necesitas organizar tarjetas o paneles en varias columnas con control fino.

De una columna en móvil a dos en escritorio

<section class="grid grid-cols-1 gap-4 md:grid-cols-2">
  <article class="rounded-xl bg-slate-800 p-4">Bloque A</article>
  <article class="rounded-xl bg-slate-800 p-4">Bloque B</article>
</section>

Breakpoints sin fricción

Empieza en móvil y escala con prefijos: sm:, md:, lg:, xl:.

El enfoque mobile-first evita sobreescrituras innecesarias y mejora la legibilidad del código.

Cambios comunes: número de columnas, tamaño de texto y espaciado por breakpoint.

Lo importante es mantener pocos saltos bien elegidos, no meter reglas para cada píxel.

1 Cuándo usar Flex 2 Cuándo usar Grid 3 Breakpoints sin fricción

🧪 Aprende probando

Ejemplo Demo: dashboard mini responsive Construye una cabecera con Flex y un cuerpo con Grid que se adapta por breakpoint.

⌄

Ejemplo Demo interactiva: flexbox con justificación, wrap y crecimiento Practica `justify-*`, `items-*`, `flex-col`, `gap`, `grow/shrink` y `flex-wrap` en escenarios reales.

⌄

Ejemplo Demo interactiva: grid con col-span, row-span y auto-fill Explora composiciones de rejilla avanzadas sin salir de utilidades Tailwind.

⌄

Ejemplo Demo interactiva: breakpoints y mobile-first visual Comprueba cómo responden `sm/md/lg/xl` y detecta el breakpoint activo en tiempo real.

⌄