Columnas fijas vs fluidas

Toma una página que consideres bien construida y arrastra la ventana del navegador lentamente de ancha a estrecha. Observa qué se mueve. Las columnas se comprimen, absorbiendo cada píxel que les quitas — pero los medianiles entre ellas se mantienen quietos, igual que los márgenes en los bordes. Entonces, en algún punto cercano al ancho de un dispositivo, la maquetación salta: doce columnas se convierten en ocho, y la compresión vuelve a empezar desde una columna más ancha. Ese ritmo de flexión-lenta-y-luego-salto es la pregunta de fijo-vs-fluido, ya respondida.

En el modelo de rejilla que usa la mayoría de las maquetaciones modernas, las columnas son fluidas — pistas 1fr que absorben los cambios del viewport — mientras que los medianiles y los márgenes se mantienen fijos dentro de cada nivel de breakpoint. Por eso, una rejilla fija vs fluida rara vez es una elección de todo o nada: la pregunta práctica es cuál de los tres anchos flexiona, y la respuesta habitual es que solo las columnas.

Este artículo cubre esa división del trabajo, las dos alternativas honestas en los extremos — todo fijo, todo fluido — y cómo las columnas fluidas interactúan con los breakpoints, con los números de un nivel calculados en ambos extremos de su rango. Es la capa de decisión de diseño de la rejilla de maquetación; el CSS que la implementa vive en otra parte del clúster.

¿Qué partes de una rejilla deberían flexionar?

Una rejilla son tres anchos — columnas, medianiles, márgenes — y merecen un tratamiento distinto porque hacen trabajos distintos.

Medianiles fijos. El medianil es ritmo: el intervalo repetido que hace que las columnas se lean como una sola familia. Deja que los medianiles escalen con el viewport y el espaciado entre todo respira de forma impredecible — las mismas dos columnas quedan a 24px de distancia en una pantalla y a 31px en otra, y el sistema de espaciado de la página deja de ser un sistema sin que nadie lo note. El espaciado está cerca de la identidad: es una de las cosas por las que un lector reconoce una maquetación, así que se mantiene quieto.

Márgenes fijos por nivel. El margen es el marco. Un marco que crece y se encoge continuamente se lee como inestabilidad en el borde de la página; un marco que se mantiene en 16px en móviles y sube por escalones en anchos conocidos se lee como un paspartú deliberado alrededor del contenido.

Columnas fluidas. Las columnas son donde vive el contenido, y las áreas de contenido son elásticas de una forma en que el espaciado no lo es — un párrafo no se lee muy distinto con 68px más de ancho, pero un medianil que oscila visiblemente sí se nota. Así que las columnas asumen todo el cambio: los miembros fijos se restan primero, y las pistas 1fr reparten lo que quede. Fluido solía significar aritmética de porcentajes hecha a mano — anchos de columna como decimales ganados a pulso, del estilo de 8,333%. La unidad fr trasladó esa aritmética al navegador, que ahora ejecuta la división del sobrante en vivo en cada ancho de viewport.

¿Cómo se ve una rejilla totalmente fija?

La alternativa heredada de la imprenta: columnas, medianiles y márgenes todos fijos, todo el lienzo como una cantidad conocida, y el ancho sobrante del viewport vertido en los márgenes exteriores mediante el centrado. Así funcionaban las primeras maquetaciones web (la era de los 960px), y sobrevive donde sus virtudes siguen aplicando — documentos, apps de lectura, cualquier cosa cuyo ideal sea «la misma página cada vez». Una medida fija es genuinamente buena para el texto largo: la longitud de línea nunca se sale del rango cómodo.

El coste es el espacio entre breakpoints. En un viewport de 1100px, una maquetación fija de 960px deja 140px de margen muerto que ni el contenido ni el marco usan; cada viewport entre dos tamaños de diseño recibe el diseño más pequeño más el desperdicio. Las rejillas fijas cambian adaptación por certeza, y el cambio solo se lee como justo donde la certeza es el producto.

¿Cómo se ve una rejilla totalmente fluida?

El extremo opuesto elimina el tope del contenedor por completo: las columnas flexionan en cada ancho sin límite superior. Los dashboards, las tablas, los editores y otras aplicaciones densas en datos usan de verdad el ancho — un monitor de 2560px que muestra más columnas de un visor de logs es una ventaja, y ponerle un tope desperdiciaría el recurso más literal del usuario, los píxeles.

Los costes aparecen cuando hay texto de por medio: columnas sin tope significan longitudes de línea sin tope, y los controles que van juntos se separan a medida que el espacio entre ellos se estira. Decidir si poner un tope es, en una frase, el eje app-vs-documento — las interfaces que usan el ancho van sin tope, las páginas que se leen reciben un contenedor — y el propio dimensionado del contenedor es un tema aparte.

¿Cómo interactúan las columnas fluidas con los breakpoints?

El ritmo responsive estándar es la combinación de los dos mecanismos: las columnas flexionan entre los breakpoints, el número de columnas cambia en ellos. Dentro de un nivel, el navegador vuelve a dividir el ancho sobrante de forma continua; en la frontera del nivel, el ancho acumulado se reinvierte en más columnas y cada columna se restablece a un ancho más estrecho. Flexiona, salta, flexiona.

La vista de rejilla de Scale Composer hace visible el «entre» porque cada breakpoint tiene dos anchos: el min-width donde empieza el nivel, y un ancho de previsualización que puedes fijar en cualquier punto dentro del rango del nivel. El nivel de tablet por defecto va desde 768px hasta 1199px — cada ancho de esa banda es la misma rejilla de ocho columnas, solo que con columnas más anchas o más estrechas.

Redimensiona el nivel de tablet a lo largo de todo su rango en Scale Composer — las mismas columnas, los mismos 24px de medianil, los mismos 29px de margen; solo se mueve el ancho de columna.

¿Cuánto flexiona en realidad una columna?

Toma el nivel de tablet por defecto — 8 columnas, 24px de medianil, 29px de margen — y calcula el ancho de columna en ambos extremos de su rango de 768–1199px. Los miembros fijos se restan primero: márgenes 2 × 29 = 58px, medianiles 7 × 24 = 168px, así que las columnas reparten lo que deje el viewport.

Una columna de tablet casi se duplica a lo largo de su propio nivel — de ≈67,8px a ≈121,6px — mientras cada medianil y margen se mantiene al píxel. Entonces llega la frontera de escritorio y la aritmética se reinicia: doce columnas, márgenes más anchos, y el ancho de columna salta de vuelta a 67px. La flexión absorbe; el salto reinvierte. Ese es el ritmo responsive completo en una sola tabla.

Quita el tope y siente la diferencia

La última decisión — documento con tope o app sin tope — es más fácil de tomar después de ver ambos sobre la misma rejilla. El max-width del contenedor en la vista de rejilla se puede desactivar: con él activado, el nivel de escritorio deja de crecer en 1200px y los márgenes toman el relevo; con él desactivado, las doce columnas siguen flexionando tan anchas como llegue la ventana. Activa o desactiva el tope del contenedor sobre la misma rejilla en Scale Composer.