Tailwind CSS Grid: tarjetas adaptables, spans y orden

Para crear una cuadrícula con Tailwind CSS Grid, aplica grid y grid-cols-1 al contenedor, define la separación y añade columnas cuando las tarjetas conserven espacio suficiente. Mantén un orden lógico en el HTML, limita los spans amplios al breakpoint adecuado y prueba textos largos antes de ajustar los detalles visuales. La composición debe funcionar en una columna antes de convertirse en una galería o un dashboard.

Esta guía desarrolla una colección editorial con una tarjeta destacada, otras normales y una acción secundaria. El razonamiento también sirve para bibliotecas de recursos y resúmenes de producto. El objetivo es implementar una interfaz adaptable con contenido realista. Los ejemplos siguen la documentación actual de Tailwind CSS; comprueba la versión instalada y la configuración del tema antes de trasladarlos a un proyecto antiguo.

Empieza por el contenido y su orden

Anota los datos de cada tarjeta: título, descripción breve, categoría, imagen y destino. Decide cuáles necesita la persona para elegir la siguiente página. En el ejemplo, entender el título y el enlace importa más que igualar todas las alturas. Un encabezado largo debe seguir siendo legible aunque su tarjeta crezca más que la contigua.

Ordena la lista según la secuencia en la que quieres presentar el contenido. El artículo destacado va primero porque es la primera recomendación editorial. La guía de accesibilidad de Grid de MDN explica que cambiar la posición visual no cambia el orden de lectura basado en el documento ni la navegación secuencial habitual con teclado.

Conserva la estructura de lista. Un ul puede actuar como contenedor grid y sus li como elementos de la cuadrícula. Dentro de cada elemento, utiliza un encabezado y un enlace descriptivo adecuados a la página. No elimines agrupaciones con significado para que todas las piezas pequeñas participen en la cuadrícula exterior. La distribución interna de cada tarjeta constituye otra decisión.

En el handoff, numera la secuencia prevista e incluye la versión estrecha. Es una ayuda de revisión recomendada: permite detectar desacuerdos sobre la prioridad antes de escribir reglas de posición complicadas. Si todavía falta definir la página, la guía de diseño web adaptable desarrolla ese trabajo previo de estructura y contenido.

Construye una base de una columna

Empieza por un contenedor cuyos hijos directos sean tarjetas completas. La lista inicial de clases es grid grid-cols-1 gap-6. La referencia de columnas de Tailwind documenta grid-cols-1 y las utilidades de pistas iguales. La clase grid establece el contexto de distribución; declarar columnas por sí solo no convierte un bloque normal en una cuadrícula.

En este ejemplo, sitúa un encabezado de sección sobre la lista. Después utiliza un ul con esas clases y un li por artículo. Cada li contiene un article con su encabezado y enlace. Basta empezar con tres casos representativos: una tarjeta con texto normal, otra con título excepcionalmente largo y una tercera sin imagen.

Distingue el espacio entre pistas del relleno interior. La documentación de gap describe la separación común y las utilidades horizontales y verticales independientes. Define el padding de las tarjetas por separado. Cuando algo parezca descompensado, identifica si el problema está entre tarjetas, dentro de ellas o alrededor de la colección antes de modificar varios valores.

Todavía no fijes alturas. Introduce textos reales en la versión estrecha y deja que ocupen las líneas necesarias. Comprueba que el enlace se entienda sin imagen. El criterio de aceptación del ejemplo es poder identificar y abrir todos los artículos sin desplazamiento horizontal de página ni títulos recortados. Es una referencia más útil que reproducir inmediatamente la captura de escritorio.

Elige saltos según el espacio útil

Para pasar de una a dos y después a tres columnas, amplía el contenedor a grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3. La guía responsive de Tailwind explica que las clases sin prefijo forman la base y las variantes de breakpoint actúan desde un ancho mínimo. Por defecto, md corresponde a 48rem y xl a 80rem; el tema puede modificarlos.

Elige los cambios después de probar el área útil real. Un navegador ancho puede dejar poco espacio a las tarjetas si hay navegación lateral y márgenes amplios. En un ejemplo con 960px de contenido y dos separaciones de 24px, tres columnas iguales reciben 304px cada una: (960 − 48) ÷ 3. Es un cálculo ilustrativo, no un breakpoint de Tailwind ni un mínimo universal.

Prepara una muestra con un ancho próximo al calculado. Introduce un título de dos líneas, otro de cuatro y una etiqueta traducida. Si el contenido necesita bastante más espacio, conserva dos columnas durante más tiempo o modifica la composición exterior. Evita reducir el texto de lectura simplemente para mantener el número de columnas que parecía más atractivo.

Si la colección se reutiliza dentro de paneles distintos, valora las consultas de contenedor. Tailwind las documenta por separado: sus prefijos incluyen @ y responden al tamaño del contenedor. md: y @md: no implican el mismo umbral. Deja escrito si el componente responde al viewport o al espacio de su contenedor para que otro equipo pueda anticipar el resultado.

Asigna un span seguro a la tarjeta destacada

Una tarjeta destacada puede ocupar varias pistas, pero ese span debe activarse donde existan suficientes columnas. Aplica md:col-span-2 al li destacado. La base de una columna conserva un elemento normal. La referencia grid-column de Tailwind documenta spans y posiciones de línea. La distribución de imagen y texto dentro de la tarjeta sigue siendo independiente del span exterior.

En la versión de dos columnas, el elemento destacado ocupa la primera fila completa. Con tres columnas, utiliza dos y deja una posición para la tarjeta siguiente. Ese es el comportamiento previsto del ejemplo; no garantiza que toda cantidad de elementos forme un rectángulo equilibrado. Decide si una última fila incompleta es aceptable antes de introducir reglas de empaquetado.

Un col-span-2 sin prefijo sobre una base de una columna puede generar una columna implícita no deseada. Si aparece desbordamiento en móvil, inspecciona el span calculado del hijo junto con la definición de pistas del padre. Aplicar overflow-hidden a la página ocultaría el síntoma. Corrige primero la posición incompatible o limita la regla al breakpoint correspondiente.

La excepción visual necesita una razón de contenido. Aquí permite una introducción más larga y una imagen mayor. Cuando todas las tarjetas tienen la misma importancia, los spans iguales facilitan la lectura y el mantenimiento. Representa el destacado mediante una opción explícita; no lo deduzcas de la longitud del título ni únicamente de su posición en el array.

<ul class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
  <li class="min-w-0 md:col-span-2">
    <article><h3><a href="https://emviui.com/components/">Catálogo de componentes</a></h3></article>
  </li>
  <li class="min-w-0">
    <article><h3><a href="https://emviui.com/">EmviUI</a></h3></article>
  </li>
</ul>

Corrige desbordamientos sin ocultar contenido

Cuando una tarjeta supera su pista, separa tres niveles: pista, elemento y contenido interior. MDN documenta minmax() como un intervalo entre tamaños mínimo y máximo. Las columnas numéricas de Tailwind utilizan un mínimo cero y un máximo flexible. Eso no obliga automáticamente a encajar cualquier imagen, dirección o hijo con ancho fijo.

Abre las herramientas del navegador e inspecciona los anchos calculados. Busca un gráfico fijo, una imagen con mínimo inadecuado, una etiqueta nowrap o un identificador sin espacios. Las utilidades de ancho mínimo de Tailwind incluyen min-w-0 para permitir que un elemento se reduzca. Aplícala donde el mínimo impida el comportamiento esperado y comprueba después cómo se distribuye el texto.

Para una dirección larga, decide dónde puede partirse en lugar de ocultar el destino. La guía overflow-wrap de Tailwind documenta wrap-anywhere en la versión actual. Úsala de forma selectiva con identificadores y URL; la prosa corriente debería conservar sus saltos naturales. Verifica el nombre disponible en tu instalación antes de mezclar utilidades de distintas versiones.

Mantén las imágenes dentro de la tarjeta y define el recorte como una decisión visual explícita. Compara una miniatura apaisada, una imagen vertical y el caso sin imagen. Una región uniforme estabiliza la colección, pero no debe eliminar datos necesarios para decidir. Si la imagen contiene texto esencial, incorpora esa información al contenido accesible de la página y no dependas de la miniatura.

Alinea posición y navegación con teclado

La estrategia más sencilla suele ser la colocación automática según el orden del documento. La guía de auto-placement de MDN explica cómo se ocupan las posiciones y cómo dense puede rellenar huecos anteriores con elementos posteriores. En esta colección conservamos la colocación habitual para que la secuencia resulte fácil de explicar en todos los tamaños.

Recorre la página con el teclado desde antes de la colección hasta después de ella. Observa el foco en cada tarjeta. Si parece saltar hacia atrás entre filas, revisa conjuntamente la posición visual y el orden del HTML. No añadas valores positivos de tabindex para compensar la composición: vuelve a la estructura que provoca la diferencia.

Comprueba también el reflow. La explicación de Reflow del W3C describe la condición de 320 píxeles CSS de ancho para contenido con desplazamiento vertical y su relación con el zoom. Una colección de artículos no debería exigir desplazamiento en dos dimensiones para leer texto normal. Las excepciones de contenido inherentemente bidimensional no justifican hacer horizontal toda la página.

Estas pruebas no certifican la accesibilidad del producto completo. Los nombres, el contraste, la visibilidad del foco y el comportamiento interactivo necesitan revisiones propias. Registra el resultado de anchura estrecha y teclado como evidencia de esta composición. Mantén visibles los problemas pendientes de cada tarjeta aunque las columnas ya se distribuyan correctamente.

Usa EmviUI como referencia visual

Utiliza el ejemplo editorial real de EmviUI que aparece debajo para analizar la jerarquía: una zona destacada precede a las tarjetas pequeñas y las imágenes repetidas ayudan a recorrer la colección. Es una muestra de diseño de EmviUI. La captura no demuestra qué CSS se utilizó, sus breakpoints ni el comportamiento del teclado.

El catálogo público de componentes de EmviUI proporciona ejemplos concretos para definir el objetivo visual. Para esta tarea, selecciona un tratamiento de tarjeta, sustituye los textos de muestra y describe cómo debe comportarse con poco ancho. EmviUI ayuda a concretar la referencia; las reglas de grid y su verificación siguen formando parte de tu aplicación.

Escribe tres notas junto a la muestra: qué tarjeta es destacada, qué texto puede ocupar más líneas y qué imagen admite recorte. Compara el navegador con esas notas en cada cambio de columnas. Este acuerdo resulta más verificable que pedir una coincidencia visual genérica a un solo ancho. Conserva títulos y destinos mientras ajustas el acabado de escritorio.

Si también necesitas decidir cómo combinar utilidades y reglas propias, continúa con la organización de estilos con Tailwind y CSS. Para compartir separaciones entre componentes, consulta la guía de tokens de diseño web. Son pasos complementarios; el ancho real del contenido todavía debe probarse en la composición.

Prueba la cuadrícula antes de publicar

Prepara una matriz pequeña en lugar de aprobar una sola captura. Comprueba una, dos y tres columnas, anchuras inmediatamente anteriores y posteriores a cada cambio configurado y un panel estrecho si hay reutilización. Incluye cero, uno, tres y siete elementos. Así aparecen el estado vacío, el destacado aislado y la última fila incompleta.

Repite con títulos traducidos largos, una imagen ausente y un identificador excepcional. Utiliza textos reales en vez de rectángulos grises. Anota el fallo y modifica una regla cada vez: número de columnas, ámbito del span, mínimo intrínseco o política de saltos. Repite el caso que fallaba antes de extender el cambio al componente completo.

Si una utilidad funciona durante el desarrollo y falta al compilar producción, revisa cómo llega su nombre al código. La documentación de detección de clases de Tailwind requiere cadenas completas que puedan detectarse. Concatenar grid-cols- con un número en tiempo de ejecución no es una forma fiable de generar estilos. Asocia las opciones admitidas con clases estáticas completas.

Cierra con una nota de implementación: orden del documento, estrategia de tamaño del padre, responsable de los breakpoints, span destacado, política de imágenes y casos de contenido comprobados. Otra persona debería poder cambiar un título o quitar dos tarjetas sin adivinar supuestos ocultos. Publica cuando se mantengan la lectura y la navegación previsible, y ajusta después el detalle visual con observaciones reales.