CSS Grid es un sistema que nos permite posicionar nuestros elementos HTML en una cuadrícula que nosotros mismos creamos. Aunque puede parecer que esta cuadrícula es un bloque sin sentido que tenemos que descubrir, la realidad es que CSS Grid nos permite organizarla como queramos. Por ello, en este post, te enseñamos cómo nombrar las líneas de grid en CSS Grid para hacer del posicionamiento de elementos un proceso más claro y sencillo.
¿Cómo nombrar las líneas de grid en CSS Grid?
Como aprendimos en nuestro post sobre numerar las líneas de grid en CSS Grid, las líneas de grid no son simplemente las líneas que dividen columnas y filas. Estas líneas también incluyen los bordes de la cuadrícula, las líneas horizontales y verticales que están a los extremos. En este post, aprendimos que todas estas líneas tienen un número que podemos usar para determinar la posición inicial y final de un elemento. En realidad, cada línea tiene dos posibles números, dependiendo del sentido en el que leamos nuestra cuadrícula.
Ahora que sabes esto, te queremos mostrar que CSS Grid tiene aún más posibilidades para personalizar tu cuadrícula. Además de usar los números de los que hablamos antes, puedes nombrar las líneas de grid en CSS Grid.
Normar las líneas de grid en CSS Grid nos permitirá, al igual que los números, definir las posiciones de los elementos dentro de la cuadrícula de un modo mucho más sencillo. Lo bueno de usar nombres en vez de números es que los puedes personalizar para que tengan sentido con tu página web y los elementos que necesites poner en ella. Entonces, saber dónde debe empezar y terminar un elemento será un proceso más rápido y evitarás tener que estar contando cada vez que quieras posicionar un elemento en tu página web.
Entonces, ¿cómo hacemos para nombrar las líneas de grid en CSS Grid? Es tan sencillo como agregar nombres en las propiedades grid-template. En estas propiedades, normalmente solo insertamos los valores de tamaño de cada columna o fila, según la propiedad que estemos usando. Sin embargo, también podemos darle un nombre a las líneas de grid directamente en esta propiedad. Para hacerlo, solo tenemos que insertar nuestros nombres entre corchetes antes de insertar el tamaño de cada columna o fila.
Te ponemos un ejemplo. Pensemos que estamos creando una cuadrícula con tres columnas. Entonces, esta cuadrícula tendrá cuatro líneas de grid verticales. Para poder nombrar las líneas de grid en CSS Grid en este caso, lo escribiremos de la siguiente manera.
grid-template-columns: [grid-start nav-start] 100px
[nav-end main-start] 300px
[main-end] 100px
[grid-end]
Las líneas de código anterior quieren decir que tenemos tres columnas, la primera de 100px, la segunda de 300px y la tercera de 100px. Entre estas columnas hay cuatro líneas de grid. La primera se llama grid-start o también se puede llamar nav-start. Ten presente que puedes nombrar las líneas de grid en CSS Grid de muchas maneras, siempre y cuando separes estos nombres con un espacio. La segunda línea de grid (de izquierda a derecha) se llama nav-end o main-start. La tercera se llama main-end y la última línea de grid (borde derecho) se llama grid-end.
Al igual que en el caso de los selectores de clase ID, siempre es bueno nombrar tus elementos con nombres que te hablen sobre sus características. En este caso, hemos creados inicios y finales para las secciones que queremos tener en nuestro grid. Esto hará que, cuando queramos, por ejemplo, ubicar una barra de navegación, sabremos que será mejor darle un inicio en la línea nav-start y un final en la línea nav-end.
Nombrar nuestras líneas de grid en CSS Grid también nos evitará problemas cuando cambiemos el número de columnas o filas, pues el nombre no cambiará, así como sí lo hará el número.
Si tienes dudas sobre el posicionamiento de elementos usando los nombres de las líneas de grid, te invitamos a ver los ejemplos que nos propone la Mozilla Developer Network sobre nombrar las líneas de grid en CSS Grid.
¿Te animas a seguir aprendiendo?
Después de leer este post sabes exactamente cómo nombrar las líneas de grid en CSS Grid y cómo utilizar estos nombres para posicionar los elementos HTML de una página web. Pero como todo fan de la programación web sabe, ¡CSS es muy extenso y todavía queda mucho por aprender!
Para continuar aprendiendo, te recomendamos apuntarte a nuestro Desarrollo Web Full Stack Bootcamp, donde seguirás formándote no solo acerca de CSS, sino que también aprenderás todo lo necesario para que seas un experto en desarrollo web. Además, en el transcurso del bootcamp intensivo, pondrás tus conocimientos a prueba creando y diseñando tu propia página web con ayuda de nuestros profesores. ¿Te animas a seguir aprendiendo con nosotros? ¡Inscríbete ya!
