Usando CSS Grid de la manera correcta

Violet Peña ha compartido sus recomendaciones para usar CSS Grid. Básicamente se reducen a estos puntos de alto nivel:

1. Utilice nombres en lugar de números para configurar nuestras columnas de cuadrícula.
2. frdebería ser nuestra unidad flexible de elección.
3. Realmente ya no necesitamos un sistema de red.

Aunque todos estos son excelentes consejos y Violet brinda algunos ejemplos para respaldar sus recomendaciones, me gusta particularmente lo que tiene que decir sobre aprender CSS Grid:

“Aprender” CSS Grid requiere desarrollar conocimiento práctico de muchas propiedades nuevas que no solo describen un aspecto de la apariencia o el comportamiento, sino que se integran en un sistema de diseño completamente nuevo. Este sistema incluye alrededor de 18 propiedades que utilizan paradigmas y sintaxis que rara vez (o nunca) se ven en ningún otro lugar de la especificación CSS.

Esto significa que CSS Grid tiene un nivel de habilidades bastante alto: un desarrollador necesita aprender e internalizar mucha información nueva para ser eficaz. Una vez que estés por encima de ese nivel de habilidades, Grid es un aliado increíble en la creación de diseños. Debajo de ese nivel de habilidades, Grid es un obstáculo. Te preguntas por qué te molestas en usarlo, ya que parece requerir mucho trabajo adicional por una pequeña recompensa.

En esta publicación, quiero ayudarlo a superar ese nivel de habilidades mostrándole las formas más efectivas de aprovechar la especificación Grid.

Además, esta publicación me recordó que, aunque no estoy seguro de por qué, tiendo a evitar nombrar las columnas de mi cuadrícula. Como en este fragmento de código que nos guía Violet:

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

Ahora podemos usar los nombres sidebaro contentcuando definimos nuestro grid-columnasí:

.content {  grid-column: content;}

¡Realmente me gusta eso! Parece muy fácil de leer y si quisiéramos cambiar el tamaño de nuestra .contentclase, entonces solo requiere volver al lugar donde se definió la cuadrícula en primer lugar. De todos modos, me aseguraré de nombrar las columnas de mi cuadrícula de ahora en adelante.