responsive-layout

name	Responsive Layout
description	HACER CUMPLIR técnicas de diseño fluido e intrínseco usando dimensionamiento basado en restricciones CSS (clamp(), minmax(), auto-fit). Prevenir desbordamiento de ancho fijo, explosión de breakpoints, espaciado con números mágicos y barras de desplazamiento horizontales. Usar container queries para capacidad de respuesta a nivel de componente. Activadores: "make it responsive", "build the grid", "fix the mobile view", "adjust the layout".
category	ui-ux
version	3.0.0
last_updated	2026-06-28T00:00:00.000Z
stacks	["Tailwind CSS v4","CSS Modules","Vanilla CSS"]
triggers	[{"pattern":"(make|build|create|convert) (it|this|the page) responsive","action":"APLICAR técnicas de diseño fluido"},{"pattern":"fix (the|this) mobile (view|layout)","action":"VERIFICAR desbordamiento → APLICAR dimensionamiento fluido"},{"pattern":"(build|create) (a|the) grid","action":"USAR auto-fit + minmax() en lugar de columnas por breakpoint"}]
related_skills	["no-slop-landing-page-architecture","dashboard-information-architecture","performance-budgets-and-cwv"]
lang	es
direction	ltr
source_version	3.0.0
translated_at	2026-06-29T00:00:00.000Z

Matemáticas de Diseño Responsivo

IDENTIFICAR: Cuándo activarse

Activar cuando:

• Se define el diseño de página, cuadrícula o disposición de tarjetas
• Se establece tipografía o espaciado entre viewports
• El usuario reporta problemas de diseño en móvil
• Se crea cualquier componente nuevo que necesita soporte multi-viewport

PRINCIPIO FUNDAMENTAL

Dile al navegador QUÉ quieres, no CÓMO hacerlo. Usa dimensionamiento basado en restricciones CSS (clamp(), min(), max(), minmax(), auto-fit). Evita breakpoints fijos para cuadrículas y tipografía.

SELECCIÓN DE TÉCNICA

SUPOSICIÓN: Tailwind CSS v4 (configuración nativa CSS mediante @theme). Si se detecta v3 (tailwind.config.ts), ajustar la sintaxis de clases utilitarias en consecuencia.

SI se construye una cuadrícula de elementos (tarjetas, publicaciones, productos) →
  USAR auto-fit + minmax(), Paso 1
SI se establecen tamaños de fuente →
  USAR clamp(), Paso 2
SI se define espaciado →
  USAR sistema de cuadrícula de 8px, Paso 3
SI se establecen anchos de contenedor →
  USAR w-full + max-w-*, Paso 4
SI se hace un componente responsivo a su padre →
  USAR container queries, Paso 5
SI se dimensionan objetivos táctiles →
  USAR mínimo 44×44px, Paso 6

EJECUTAR: Instrucciones

Paso 1: Cuadrículas Fluidas con auto-fit + minmax()

NUNCA usar recuentos de columnas dependientes de breakpoints:

/* ❌ TRES media queries para una cuadrícula */
.grid {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .grid { grid-template-columns: 1fr 1fr fr; } }


 {
  : grid;
  : (auto-fit, ((, ), fr));
  : ;
}