Resumen

  • El primer borrador público de Grid Layout del W3C, en abril de 2011, identificó tablas, JavaScript y elementos flotados medidos al detalle como soluciones frágiles para interfaces complejas.
  • La Recomendación Candidata de diciembre de 2017 describió contenedores, pistas, líneas, áreas, tamaños flexibles y colocación automática; el contenido seguía teniendo su estructura en HTML.

La mesa del comedor estaba harta. Primero alojó datos en filas y columnas. Después le encargaron sostener toda una página: el menú a la izquierda, un panel al centro, otro al lado y un pie de página que debía entrar de cualquier manera. Los flotados hacían de puntales. JavaScript llegaba con la cinta métrica. Al reducir la ventana, la obra crujía.

El primer borrador público de Grid Layout del W3C, de 7 de abril de 2011, nombró esos recursos. Las aplicaciones web necesitaban diseños más complejos que los de un documento lineal, y los autores recurrían a tablas, scripts y cálculos cuidadosos con elementos flotados. El resultado podía quebrarse cuando cambiaba el espacio. Otra salida era fijar el ancho y aceptar huecos enormes en una pantalla o estrecheces en otra.

La propuesta repartía el área de presentación en filas y columnas con líneas y celdas de cuadrícula. La diferencia respecto de una tabla importaba: la tabla da estructura a datos; Grid define dónde se ven piezas de un documento. Una noticia y una barra lateral pueden vivir una junto a otra sin convertirse en dos celdas de datos relacionadas. El HTML mantiene el sentido de cada pieza, y CSS decide su posición.

Los ejemplos de 2011 eran parte de una obra en curso. Aparecían nombres como grid-columns y grid-rows, distintos de las propiedades que se consolidaron después. La idea era más estable que el vocabulario: un autor quería señalar pistas, límites y posiciones, y dejar que el navegador calculase el espacio de cada sala. Un plano preliminar no se copia sin mirar la revisión final.

La Recomendación Candidata del W3C de 14 de diciembre de 2017 describe el contenedor de Grid y sus elementos. Se definen pistas para filas y columnas, líneas o áreas con nombre y reglas para colocar piezas. Algunas se ubican expresamente; otras siguen la colocación automática. Los tamaños pueden ser fijos o flexibles, y la unidad fr reparte el espacio libre. La página deja de depender de medidas talladas para una sola ventana.

La colocación automática evita otro trabajo tedioso. En una colección de tarjetas, cada elemento nuevo puede ocupar el siguiente espacio según las reglas del flujo; el navegador crea pistas implícitas si hace falta. El editor decide la lógica del plano y el navegador sienta a los invitados. La tarjeta número trece deja de exigir una reforma manual.

Grid permite coordinar dos dimensiones. La cabecera puede abarcar varias columnas, una navegación ocupar una pista y distintos paneles alinearse debajo. Hay herramientas excelentes para flujos de una sola dirección; esta historia trata de cómo distribuir las habitaciones de una página. A la mesa ya no hay que pedirle que sea el edificio.

Mover piezas en pantalla también obliga a pensar en el orden del documento. La posición visual puede cambiar sin alterar la secuencia del HTML que siguen otros métodos de lectura y navegación. El texto de 2017 toma en serio esa diferencia. Un diseño puede desplazar la conclusión a una esquina; el contenido debe seguir teniendo sentido al recorrerlo en su orden de origen.

El historial de publicación del W3C para CSS Grid Layout Level 1 arranca en abril de 2011 y registra los pasos de Recomendación Candidata de 2016 y 2017. Sus fechas son las de los textos. El recorrido va de los apaños y los nombres experimentales a un modelo detallado de pistas, colocación y espacio flexible.

La lectora quizá nunca vea una línea de CSS. Notará si la barra lateral le roba la noticia en el móvil, si las tarjetas chocan o si la página respira al cambiar de tamaño. Grid dio a los autores un plano y al navegador permiso para resolverlo ante la pantalla real. La mesa volvió a un cargo para el que siempre estuvo cualificada: sostener el café.