Spans de columnas y anidamiento

En una rejilla CSS, un elemento reclama su ancho como un span: grid-column: span 4 —o una clase utilitaria .col-4— ocupa cuatro de las columnas del nivel actual, medianiles internos incluidos. Construir una página sobre una rejilla es la aritmética de los spans (las secciones dividen las doce columnas de escritorio en patrones como 8 + 4 o 4 + 4 + 4) más el criterio detrás de la aritmética: primero el ancho del contenido, segundo la jerarquía, tercero la alineación.

La rejilla define las columnas; los spans deciden qué se apoya sobre ellas. Este artículo cubre la gramática del span, el puñado de patrones con los que se construye la mayoría de las páginas, las tres decisiones detrás de un span, qué hereda y qué no hereda una rejilla anidada, y qué les pasa a los spans en un teléfono: la capa de composición de la rejilla de maquetación.

¿Qué hace realmente grid-column: span N?

La propiedad grid-column coloca un elemento sobre las líneas de columna de la rejilla, y la palabra clave span es su forma relativa: ocupa N pistas a partir de donde caiga el elemento. Un span es una declaración de ancho en unidades de columna, no en píxeles: un elemento span-4 mide cuatro columnas más los tres medianiles entre ellas.

Con números de escritorio habituales (contenedor de 1200px, márgenes de 66px, medianiles de 24px, doce columnas de 67px cada una), span 4 da 4 × 67 + 3 × 24 = 340px y span 8 da 704px. La misma declaración produce anchos reales distintos en otros niveles, que es justo lo que hace que los spans sean portables donde los anchos en píxeles no lo son.

¿Qué patrones de span cubren la mayoría de las páginas?

Un vocabulario reducido se repite en la mayoría de las maquetaciones de doce columnas:

Estos patrones se repiten porque 12 tiene muchos divisores: las mitades, los tercios y los cuartos caen todos sobre columnas enteras, y los pares asimétricos (5 + 7, 8 + 4) también suman de forma limpia.

¿Cómo eliges un span?

Primero el ancho del contenido. Parte de lo que necesita el contenido y luego conviértelo. Una barra lateral se siente cómoda alrededor de 300px: con los números de escritorio de arriba, span 4 da 340px —espacio para respirar— mientras que span 3 da 249px, ajustado para cualquier cosa más allá de enlaces. Una línea de texto de cuerpo se lee mejor cerca de 45–75 caracteres, que a 16px cae en el territorio de span 7 a 8. El span es la conversión de un requisito de contenido en unidades de columna, no un número elegido por su propia elegancia.

Segundo la jerarquía. El ancho se lee como importancia: en una maquetación 8 + 4, pocos lectores confunden la barra lateral con lo principal. Si dos áreas importan por igual, 6 + 6 lo dice; si no importan por igual, darles el mismo ancho desinforma de forma silenciosa.

Tercero la alineación. Los spans que comparten líneas de rejilla crean los bordes verticales que hacen que una página se sienta estructurada. En la pila de 8 + 4 sobre 4 + 4 + 4, el límite entre artículo y barra lateral cae sobre la misma línea que el borde izquierdo de la tercera tarjeta: un solo borde continuo a lo largo de la página. El porqué intuitivo: el ojo lee los bordes compartidos como estructura intencional, y lee los casi-aciertos como descuido; un borde que casi se alinea molesta a menudo más que uno que claramente no lo hace, porque parece un intento fallido del primero.

Mira estos patrones en vivo sobre la rejilla por defecto en Scale Composer —las filas 8 + 4, 6 + 6 y 4 + 4 + 4 sobre el nivel de escritorio de doce columnas, con los bordes compartidos visibles donde los patrones se apilan.

¿Una rejilla anidada hereda la rejilla de la página?

No, y saber exactamente qué se traslada evita las sorpresas habituales. Cualquier elemento con span puede declarar display: grid y alojar su propia rejilla, pero las pistas de la rejilla interna son enteramente suyas: no hereda ni el número de columnas, ni las posiciones de las líneas, nada geométrico. Las propiedades personalizadas sí se heredan, así que un gap: var(--grid-gutter) interno toma el medianil del nivel: los números fluyen hacia abajo; las pistas no. Una consecuencia que conviene conocer: una división equitativa de un span par, usando el mismo medianil, vuelve a caer sobre las líneas de columna de la página (la mitad de un artículo span-8 es exactamente un ancho span-4), pero la mayoría de las demás divisiones internas se desvían por completo de la rejilla de la página.

La pregunta más útil es si la rejilla de la página tiene cabida dentro de un componente siquiera. Normalmente no: el trabajo de la rejilla de la página es posicionar componentes, y el interior de un componente se rige por su propia lógica de padding y gap. Una tarjeta no necesita saber que se apoya sobre una página de doce columnas; necesita un espaciado interno consistente allí donde se coloque. Mantener esa frontera es lo que permite que los componentes se muevan entre maquetaciones sin renegociar.

La excepción genuina es la alineación entre hermanos: hacer que los títulos, los precios y los botones de tres tarjetas vecinas se sitúen en filas compartidas sin importar la longitud del contenido. Para eso está subgrid: una rejilla anidada que adopta las pistas de su padre en lugar de definir las suyas. Es la herramienta más nueva de este artículo, con soporte de navegador amplio pero relativamente reciente, así que comprueba tu soporte mínimo de navegadores antes de apoyarte en ella.

¿Qué les pasa a los spans en un teléfono?

Los spans son decisiones por nivel, y hay dos maneras de tomarlas.

Por defecto está el clamp integrado en las clases de span de la rejilla: grid-column: span min(N, var(--grid-cols)) limita cada declaración al número de columnas del nivel, así que un 8 + 4 de escritorio se convierte en dos filas de ancho completo en un teléfono de cuatro columnas: una pila limpia, escrita en ninguna parte. El clamp es lo correcto siempre que «todo a ancho completo» sea la respuesta acertada para pantalla pequeña, que para páginas dominadas por texto normalmente lo es.

La reasignación explícita de spans toma el relevo cuando el ajuste de línea necesita dirección de arte. Un par 6 + 6 en una tableta de ocho columnas se limita a 6 + 6, pero 6 + 6 > 8, así que los dos elementos se envuelven en filas separadas con seis de ocho columnas de ancho cada uno: irregular, no apilado. Una sola media query que los vuelve a declarar como span 4 + 4 (lado a lado) o 8 + 8 (pila a ancho completo) enuncia la intención. El clamp es degradación elegante; reasignar spans es diseño.

¿Cómo se comporta una fila de tarjetas de escritorio a teléfono?

Sigue tres tarjetas .col-4 a través de los niveles por defecto:

Escritorio y teléfono salen exactamente como se pretendía, gratis. La fila de tableta es el caso honesto: el clamp garantiza que nada se desborde, pero tres tarjetas span-4 en ocho columnas se envuelven 2 + 1, dejando una huérfana. Si eso molesta al diseño, es una sola regla explícita en ese nivel —dale a la tercera tarjeta span 8 como cierre a ancho completo, o baja las tres a ancho completo—: en cualquier caso, la excepción es una línea, no un sistema.

Observa un span aplicando el clamp

Es más fácil confiar en el clamp una vez que lo has visto suceder. Carga el patrón 8 + 4 y avanza la previsualización de escritorio a tableta a teléfono: los spans se mantienen en doce y ocho columnas, luego se pliegan a ancho completo en cuatro: observa cómo los spans de escritorio se reducen con el clamp hasta una pila de teléfono en Scale Composer.