CSS Grid es un sistema de posicionamiento avanzado de CSS en el que ubicamos los elementos HTML de nuestra página web con base a una cuadrícula. Dentro de esta cuadrícula, los elementos se ubican en celdas que podemos modificar usando una variedad de propiedades. En esta ocasión, te enseñaremos cómo usar las áreas en CSS Grid con la ayuda de la propiedad grid-template-areas y te explicaremos cómo estas nos sirven para ubicar elementos.
¿Cómo funcionan las áreas en CSS Grid?
Las áreas en CSS Grid nos permiten ubicar elementos en nuestra cuadrícula de un modo más visual que el posicionamiento con números, flujos o nombres de línea. Para entender cómo funcionan las áreas en CSS Grid, primero hay que saber utilizar la propiedad grid-template-areas. Esta propiedad nos permite nombrar celdas dentro de nuestra cuadrícula y crear áreas basadas en las celdas que tengan el mismo nombre. La forma de unir celdas en esta propiedad es darles el mismo nombre en nuestro código.
Te proponemos un ejemplo. Imagina que queremos pintar un esquema con tres columnas y cuatro filas, es decir, una cuadrícula de doce celdas. En la primera fila queremos que nuestro header ocupe todas las celdas. Luego, queremos poner un nav que ocupe la primera columna de la segunda y tercera fila. Después, un main que ocupe la segunda columna de la segunda y tercera fila. A continuación, queremos dos elementos en la tercera columna, uno llamado redes en la segunda fila y otro llamado contacto en la tercera. Y finalmente, un elemento footer que ocupe toda la cuarta fila. Entonces, podemos usar la propiedad grid-template-areas junto a estos nombres para ordenar nuestras celdas.
Lo escribiríamos de la siguiente manera.
grid-template-areas: «header header header»
«nav main redes»
«nav main contacto»
«footer footer footer»
Lo que hemos hecho es crear áreas nombrando cada celda. Como hemos dicho antes, el navegador entenderá que aquellas celdas que tengan el mismo nombre se convertirán en una sola área. Esta manera de organizar la cuadrícula de nuestra página web nos permite ver la cuadrícula desde nuestro código y entenderla de una manera mucho más visual.
Si creas líneas entre los espacios de las filas y los espacios entre las palabras, verás que lo que hemos creado es una cuadrícula de tres columnas y cuatro filas, con doce celdas nombradas. Lo que nos queda ahora es determinar la posición de cada elemento según estos nombres de área.
Pero ¿cómo funcionan las áreas en CSS Grid a la hora de ubicar nuestros elementos en la cuadrícula? Para ubicar los elementos en las áreas que hemos definido basta con insertar la propiedad grid-area en nuestro archivo CSS. Entonces, podemos utilizar los atributos que le hemos dado a cada elemento para seleccionarlo e insertar esta propiedad.
Imagina que tenemos un elemento al que le hemos dado el atributo de clase «item1». Entonces, podemos insertar la propiedad grid-area: header en el selector de clase .item1 para ubicarlo en el área que hemos definido como header, que en ese caso será la primera fila.
Ten en cuenta que con las áreas, si quisieras cambiar tus elementos de ubicación completamente, podrías cambiar directamente el área de lugar en vez de tener que cambiarla en el elemento.
Ahora que sabes cómo funcionan las áreas en CSS Grid, ¡es el momento de que crees y diseñes tu propia cuadrícula! ¿Y qué mejor lugar que hacerlo que en tu propia página web? Para ello, te invitamos a ser parte del Desarrollo Web Full Stack Bootcamp, en donde aprenderás todo lo necesario para ser un experto de este tema.
Además, en este bootcamp intensivo encontrarás un espacio en el que puedes arriesgarte a crear y diseñar tu propia página web, pues lo harás con ayuda de nuestros profesores. ¿A qué esperas para unirte? ¡Hazlo ya!
