Ahora que conocemos la interfaz de Grid, es momento de entender una de las ideas fundamentales para diseñar sitios web: pensar en cajas y en cómo estas se organizan y fluyen dentro de una página.

La web está hecha de cajas

Todos los sitios web, independientemente de la herramienta con la que hayan sido creados, están compuestos por cajas dentro de otras cajas.

Una sección es una caja.

Un párrafo es una caja.

Un botón también es una caja.

Estas cajas no necesariamente son visibles para el visitante, pero forman parte de la estructura de la página.

[Captura o diagrama: diferentes elementos de una página representados como cajas]

La particularidad de estas cajas es que no son rígidas. Su tamaño y posición pueden adaptarse tanto al contenido que tienen dentro como al espacio disponible en el elemento que las contiene.

Esta característica es fundamental para entender cómo funciona el diseño web.

Diseño gráfico vs. diseño web

Para entender esta diferencia podemos comparar una página web con un programa tradicional de diseño gráfico, como Adobe Illustrator.

En un programa de diseño gráfico, los elementos suelen posicionarse libremente sobre un lienzo utilizando coordenadas. Podemos colocar un título exactamente donde queremos, independientemente de otros elementos.

Esto nos da mucha libertad, pero también significa que los elementos no necesariamente tienen una relación entre sí.

Por ejemplo, imaginemos un título y un párrafo colocados uno debajo del otro.

[Captura: título y párrafo posicionados de forma independiente]

Si aumentamos el tamaño de letra del título o hacemos que el título sea más largo, puede comenzar a superponerse con el texto que está debajo.

Para solucionar el problema tendríamos que mover manualmente el párrafo.

Y si además cambiamos el tamaño del lienzo, probablemente tengamos que volver a acomodar los elementos.

[Captura: mismo diseño después de cambiar el tamaño del título]

En diseño web esto no funciona de la misma manera.

Una página web no tiene un tamaño fijo

A diferencia de una pieza gráfica destinada a impresión, una página web no tiene un único tamaño de lienzo.

Puede ser visitada desde una computadora, una tablet, un teléfono o cualquier otro dispositivo. Incluso dentro de una misma categoría existen infinidad de tamaños de pantalla.

Por eso, no podemos depender de un sistema en el que cada elemento tenga una posición absoluta y fija.

El canvas de una página web es variable y fluido.

[Captura o animación: el mismo diseño adaptándose a diferentes anchos de pantalla]

Algunas herramientas de diseño, como Figma, ofrecen sistemas como Auto Layout para resolver este problema. Estos sistemas permiten que los elementos mantengan relaciones entre sí y se adapten cuando cambia el espacio disponible.

Pero en la web existe un concepto todavía más fundamental: el flujo natural del documento.

El flujo natural del documento

En Grid, y en la web en general, el contenido fluye de una manera similar a la de un documento de texto.

Los elementos se van organizando dentro de la página y, normalmente, se van apilando de arriba hacia abajo. Cada caja ocupa su espacio y puede empujar a las siguientes.

Por ejemplo, si tenemos un título seguido de un párrafo y hacemos que el título ocupe más espacio, el párrafo se desplaza automáticamente hacia abajo.

[Captura o animación: un elemento creciendo y empujando al siguiente]

Este comportamiento se conoce como Flujo Natural del Documento y es parte del funcionamiento nativo de los navegadores.

Al principio puede parecer más restrictivo que colocar elementos libremente sobre un lienzo. Sin embargo, esta forma de organizar el contenido es precisamente lo que permite que una página pueda adaptarse a diferentes tamaños de pantalla.

Cambiar nuestra forma de pensar

Por eso, cuando diseñamos para la web, tenemos que cambiar nuestra forma de pensar.

En lugar de imaginar elementos que podemos colocar libremente en cualquier posición, tenemos que pensar en cajas que se organizan dentro de otras cajas y que fluyen en relación con el resto del contenido.

Este concepto es fundamental para poder crear diseños responsivos.

[Diagrama: “elementos posicionados libremente” → “cajas dentro de cajas”]

Una vez que entendemos esta lógica, las herramientas de layout de Grid empiezan a tener mucho más sentido.

En la próxima clase vamos a aprender a organizar y ajustar estas cajas utilizando Stacks y Grillas, además de márgenes y diferentes opciones de alineación y distribución.