Cómo funcionan las áreas en CSS Grid

Autor: | Última modificación: 30 de junio de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

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 funciona CSS Grid?

En nuestro post sobre el posicionamiento avanzado con CSS Grid, hemos definido esta herramienta como un sistema de posicionamiento de elementos que nos permite ubicar elementos en una cuadrícula completamente modificable. Dentro de esta definición hemos mencionado que dicha cuadrícula está conformada por las unidades celda, la unidad mínima de la cuadrícula en donde se ubican los elementos, línea de grid, las líneas horizontales y verticales que crean columnas y filas, y los track que son las columnas o filas individuales.

Además de estas tres unidades, la cuadrícula grid también puede tener áreas, que son aquellas uniones de celdas en cualquier forma que no sea una columna o una fila completa.

Existen muchas propiedades para controlar el tamaño, número y patrón de las columnas y filas en CSS Grid, también existen propiedades para nombrar y numerar las líneas de grid, que a su vez nos permiten modificar las celdas. Pero todavía no hemos mencionado cómo funcionan las áreas en CSS Grid. A continuación, te explicamos qué podemos lograr con esta unidad.

¿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.

¿Qué sigue?

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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!