Usar la Cuadrícula CSS (CSS Grid) de manera correcta (por Violet Peña)

(El artículo original y en inglés, fue publicado el 17 de febrero de 2019)

A través de CSS.Tricks di con el artículo “Using CSS Grid the right way”, de Violet Peña.
Muy amablemente la autora me dio permiso para traducir y publicar el artículo aquí.
Espero que también les guste.

Use nombres. Use frs. No utilice un sistema de cuadrícula. ¡Espere! ¿lo qué?

La cuadrícula CSS (CSS Grid) es robusta, flexible y una renovación refrescante de paradigma con respecto a otros sistemas de diseño CSS. Si bien esos son los atractivos de la cuadrícula, también son lo que dificulta su aprendizaje.

“Aprender” cuadrículas CSS (CSS Grid) requiere desarrollar el conocimiento del funcionamiento de muchas propiedades nuevas que no solo describen un aspecto de la apariencia o del comportamiento, sino que introducen un sistema de disposición completamente nuevo. Este sistema incluye cerca de 18 propiedades que usan paradigmas y sintaxis que se encuentran rara vez (o nunca) en algún otro lugar de la especificación CSS.

Esto significa que las cuadrículas CSS tienen una curva de aprendizaje bastante empinada y un desarrollador necesita aprender e internalizar mucha información nueva para poder ser efectivo con ellas. Una vez que se supera la primer meseta en esa curva, la cuadrícula es un aliado increíble en la creación de estructuras y diseños. Pero antes de llegar a ese punto, la cuadrícula es un estorbo: hasta te preguntas por qué te molestas en usarlo, ya que parece que requiere mucho trabajo adicional para lograr una recompensa muy pequeña.

Con esta entrada, quiero ayudarlo a superar esa meseta mostrándole las formas más efectivas de aprovechar la especificación de las cuadrículas. Si bien no estaré cubriendo la especificación en su totalidad (para algo así, vea esta entrada de CSS Tricks) lo que sí cubro aquí son, para mí, los aspectos más útiles de este sistema de diseño.

Use nombres, no números

A las columnas y filas de la cuadrícula, en su forma más básica, se las menciona con números. Por ejemplo, las siguientes reglas CSS configuran una cuadrícula con dos columnas y colocan el contenido principal de la página en la segunda columna:

.container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    }

.content {
    grid-column: 2;
    }

Esto funciona, pero le falta una característica sorprendente de las cuadrículas: que se le pueden definir nombres específicos a las filas y a las columnas. Debería aprovechar esto, siempre que sea posible.

Así que aquí están las mismas reglas CSS, ajustadas para usar nombres:

.container {
    display: grid;
    grid-template-columns: [sidebar] 1fr [content] 2fr;
    }

.content {
    grid-column: content;
    }

Incluso en casos simples como este, es una ventaja para usted poner nombres a las áreas de la cuadrícula.

Beneficios

Agregar nombres a su cuadrícula acarrea un par de beneficios importantes.

Legibilidad: de pique, su código es más fácil de entender. La línea 3 ahora describe todo lo que sucede dentro del contenedor (.container) de la cuadrícula. No está solo listando columnas; está delineando la función de cada una de ellas.

La línea 7 también se ha vuelto más descriptiva. Anteriormente, solo sabíamos que .content residía en la segunda columna, lo que no significa mucho sin más contexto: ¿columna 2 de 3? ¿2 de 200? Sin embargo, la asignación de un nombre a la columna indica que este elemento se ha tenido en cuenta específicamente dentro de un sistema más grande. Adicionalmente, tener un nombre hace que sea más fácil encontrar la declaración de la columna original, en caso de ser necesario.

Persistencia: agregar nombres hace que su CSS sea más flexible. Específicamente, puede iterar en .container sin tener que editar .content.

¿Quiere un enroque visual entre el contenido y la barra lateral? Fácil.

.container {
    display: grid;
    grid-template-columns: [content] 2fr [sidebar] 1fr;
    }

.content {
    grid-column: content;
    }

¿Quiere añadir otra columna? No hay problema.

.container {
    display: grid;
    grid-template-columns: [related-post] 1fr [sidebar] 1fr [content] 2fr;
    }

.content {
    grid-column: content;
    }

De no usar nombres para las columnas, tendría que actualizar el número de columna en la línea 7 para reflejar los cambios realizados en la línea 3. Las columnas con nombre le dan un comportamiento consistente a .content que es independiente del orden o número de columnas.

Use fr como su unidad flexible

La cuadrícula CSS presenta la unidad fr, que define el espacio que ocupa un área como fracciones del espacio disponible total. Si bien fr puede parecer una nota al margen dentro de la especificación de cuadrícula CSS, en realidad es indispensable.

La unidad fr es diferente de % o de vw porque mientras que éstas últimas describen porciones de un conjunto de 100 unidades, las fr están definidas por el espacio que no está en uso aún por otra cosa. Las fr dividen este espacio en relación unos con otros.

Aquí, la columna de contenido es dos veces más ancha que la columna de la barra lateral.

.container {
    display: grid;
    grid-template-columns: [sidebar] 1fr [content] 2fr ;
    }

.content {
    grid-column: content;
    }

Como no hay unidades que no sean fr y hay tres fr en total, 1fr = ~ 33% del ancho de la cuadrícula.

Beneficios

La unidad fr ofrece un par de cosas de las que otras unidades flexibles carecen.

Pensada para la legibilidad y claridad: el uso de fr, a diferencia del uso de porcentajes, nos permite mantenernos con números enteros cuyo tamaño es relativo entre sí, no relativo a un todo. Esto mantiene claro el comportamiento deseado. Por ejemplo, la línea 3 es fácil de traducir al castellano: “El contenido es dos veces más ancho que la barra lateral”.

Los fr también le permiten repartir el espacio de maneras que serían difíciles de calcular (y leer) usando porcentajes.

.container {
    display: grid;
    grid-template-columns: [sidebar] 3fr [content] 4fr ;
    }

Menos matemática: el mayor beneficio de las fr es que le quita la responsabilidad de hacer las cuentas al desarrollador y se la pasa al motor de diseño del navegador. Por ejemplo, aquí hay un CodePen que muestra dos formas de hacer el mismo diseño utilizando cuadrículas CSS.

Las siguientes líneas son el corazón de esa demo:

.percents, .frs {
    display: grid;
    grid-column-gap: 20px;
    }

.percents {
    grid-template-columns: repeat (3, calc ((100% - 40px) / 3))
    }

.frs {
    grid-template-columns: repeat (3, 1fr);
    }

El código en la línea 7 es difícil de escribir, difícil de leer y frágil. Cualquier cambio en grid-column-gap o a la cantidad de columnas, romperá el diseño, a no ser que actualicemos manualmente el ancho de columna para que coincida.

La línea 11 puede ignorar el valor del espacio entre columnas y no requerirá nuevos cálculos si actualizamos la cantidad de columnas. Es fácil de leer y es compatible hacia adelante.

No use un sistema de cuadrícula

Esta recomendación, que suena contradictoria, se extiende más allá de la especificación de cuadrículas CSS y se derrama sobre el funcionamiento del diseño web y en cómo los desarrolladores interactúan con los diseñadores y su trabajo.

Los diseños se entienden, a menudo, como elementos alineados a lo largo de un sistema de cuadrícula.

Por lo general, los desarrolladores procuran coincidir con el diseño. Si los diseños se basan en una cuadrícula de 14 columnas, el desarrollador establecerá algún tipo de cuadrícula de 14 columnas en el código y escribirá clases de ayuda para que los elementos abarquen las columnas que sean necesarias (1, 2, 3, 6, etc). La mayoría de los entornos de trabajo de interfaces, como Bootstrap, funcionan de esta manera.

El ejemplo anterior muestra una cuadrícula de 14 columnas, con estos elementos para colocar y dimensionar:

1. El encabezado, que comienza en la columna 2 y abarca 12 columnas
2. La barra lateral, que comienza en la columna 2 y abarca 4 columnas
3. El contenido principal, que comienza en la columna 6 y abarca 8 columnas

En una cuadrícula CSS, es fácil configurar un sistema que imite ese diseño:

.main {
    display: grid;
    grid-column-gap: 2rem;
    grid-row-gap: 1rem;
    grid-template-rows: [header] 100px [body] auto;
    grid-template-columns: repeat (14, 1fr);
    }

.header {
    grid-row: header;
    grid-column: 2 / span 12;
    }

.sidebar {
    grid-row: body;
    grid-column: 2 / span 4;
    }

.content {
    grid-row: body;
    grid-column: 6 / span 8;
    }

Pero, ¿es este realmente un buen plan? Este intento de reproducción exacta del diseño tiene dos inconvenientes.

En primer lugar, frustra el plan original de dar nombre a las columnas. Además, de esas 14 columnas, solo se están "usando" las columnas 2, 5, 6 y 13. Esto funciona técnicamente, pero sugiere una mala relación señal / ruido.

Ambos problemas se solucionan si podemos alejarnos un par de pasos del diseño original:

.main {
    display: grid;
    grid-column-gap: 2rem;
    grid-row-gap: 1rem;
    grid-template-rows: [header] 100px [body] auto;
    grid-template-columns: [left-gutter] 1fr [sidebar] 4fr [content] 8fr [right-gutter] 1fr;
    }

.header {
    grid-row: header;
    grid-column: sidebar / right-gutter;
    }

.sidebar {
    grid-row: body;
    grid-column: sidebar;
    }

.content {
    grid-row: body;
    grid-column: content;
    }

Ahora, en lugar de tener 14 columnas, solo tiene 4, pero aún así dividen el espacio lateral en 14 fracciones. Tiene exactamente el mismo efecto visual que con el CSS anterior, pero en este caso el código tiene menos “ruido” y refleja directamente cómo se usa.

Se puede continuar con este paradigma a lo largo de todo el diseño. Suponga que dentro del elemento .content necesita espacio para informaciones auxiliares junto al artículo principal (para una biografía del autor, una propaganda, etc).

Si se ha adherido estrictamente a la cuadrícula de 14 columnas, parece que necesitaría algo como esto:

.content {
    grid-row: body;
    grid-column: 6 / span 8;
    }

.article {
    grid-column: 7 / span 4;
    }

.info {
    grid-column: 11 / span 2;
    }

Pero esto es algo espinoso, ya que la cuadrícula CSS no tiene el concepto de herencia. .info no sabe nada sobre la cuadrícula configurada en .main, su elemento abuelo.

Sin embargo, si abandona la cuadrícula de 14 columnas de forma literal, es posible que note que .article e .info no necesitan saber nada sobre la cuadrícula de nivel superior, ya que son parte de una nueva cuadrícula dentro de .content.

.content {
    grid-row: body;
    grid-column: content;
    display: grid;
    grid-template-columns: [left-gutter] 1fr [article] 4fr [info] 2fr [right-gutter] 1fr;
    grid-column-gap: 2rem;
    }

.article {
    grid-column: article;
    }

.info {
    grid-column: info;
    }

Al utilizar esta configuración, .content es simple y consistente internamente, pero también se alinea perfectamente con las columnas externas configuradas en .main.

Beneficios

Además de lo ya dicho, una adhesión más flexible al sistema de diseño original le exige, como desarrollador, aprovechar la experiencia y las herramientas, el navegador, de manera más efectiva. Los píxeles y las columnas son menos importantes que las relaciones y el espacio proporcional.

No es significativo que .article comience en la columna 7 y que .info lo haga en la 11. Pero sí es significativo que .article tenga el doble de ancho que .info. Pensar en los elementos de forma proporcional e investigar cómo interactúan entre sí nos ayuda a tratar los diseños como sistemas dinámicos.

Nota al margen: anidar etiquetas

Una cosa que puede haber notado acerca de los ejemplos de código en esta sección es el uso de columnas left-gutter y right-gutter. Este CSS asume el HTML más plano posible.

.main {
    display: grid;
    grid-template-columns: [left-gutter] 1fr [sidebar] 4fr [content] 8fr [right-gutter] 1fr;
    }

Si estamos dispuestos a poner un div envolvente en el etiquetado, podemos escribir CSS más directo con menos columnas por elemento.

.main {
    display: grid;
    grid-template-columns: [left-gutter] 1fr [wrapper] 12fr [right-gutter] 1fr;
    }

.wrapper {
    grid-column: wrapper;
    display: grid;
    grid-template-columns: [sidebar] 1fr [content] 2fr;
    }

El segundo enfoque se siente intrínsecamente mejor porque las matemáticas son más simples: puede dejar de preocuparse rápidamente por los números que se suman a 14 y solo pensar en una relación de 1:2. Esto se siente fiel al espíritu de la cuadrícula CSS.

Sin embargo, lo que no se siente fiel a la cuadrícula CSS es el tener que agregar el div .wrapper. La cuadrícula trabaja arduamente para ayudarle a separar la presentación del contenido, es decir, no necesita agregar elementos extra para hacer que el estilo funcione o “se comporte bien”. Por lo tanto, al menos por hoy, lo aliento a no agregar ni cambiar el etiquetado si es solo por tener una declaración de estilo de cuadrícula CSS más limpia.

Colofón

¡Gracias por acompañarme en este viaje por las cuadrículas CSS! Las he estado usando y amando en los últimos meses, y espero que esto le ayude a entenderlas y usarlas para sus objetivos.

Para reiterar mis puntos de la introducción: la cuadrícula CSS es fácil de usar pero difícil de aprender. Es un paradigma más intuitivo que cualquier otra técnica de diseño CSS, pero es completamente diferente de sus predecesores.

Todo esto para decir: tome la cuadrícula de a poco. No trate de entender todo solo leyendo la especificación. Configure ejemplos simples, abra el inspector web (¡especialmente en Firefox!) Y sea amable consigo.

Valdrá la pena.