Creación y Optimización de Grids en CSS

Dominar la creación de filas y columnas es el paso fundamental para construir layouts con CSS Grid. Con apenas tres líneas de código puedes definir una cuadrícula completa, controlar su espaciado y nombrar cada celda para ubicar elementos con precisión. A continuación se desglosan las propiedades esenciales que lo hacen posible.

¿Cómo se definen columnas y filas en CSS Grid?

Dentro de un contenedor con display: grid, las columnas se crean en dirección vertical y las filas en dirección horizontal [0:18]. Para indicarle al navegador cuántas columnas y de qué tamaño necesitas, se utiliza la propiedad grid-template-columns. De forma análoga, grid-template-rows establece las filas.

css .contenedor { display: grid; grid-template-columns: 20px 20px 20px 20px 20px; grid-template-rows: 20px 20px 20px 20px 20px; }

Este ejemplo genera una cuadrícula de cinco columnas y cinco filas, cada una de veinte píxeles [0:48]. Funciona, pero resulta repetitivo. Ahí entra en juego una función que simplifica todo.

¿Qué hace la función repeat en CSS Grid?

La función repeat() recibe dos argumentos: la cantidad de tracks y el tamaño de cada uno [1:30]. En lugar de escribir el mismo valor cinco veces, basta con una sola declaración.

css .contenedor { display: grid; grid-template-columns: repeat(5, 20px); grid-template-rows: repeat(5, 20px); }

El primer valor indica cuántas columnas o filas quieres; el segundo, la medida que tendrá cada una.

¿Cómo unificar filas y columnas con grid-template?

Existe un atajo aún más compacto: la propiedad grid-template. Separa filas y columnas con una barra oblicua (/). El valor antes del slash corresponde a las filas y el que está después a las columnas [1:52].

css .contenedor { display: grid; grid-template: repeat(5, 20px) / repeat(5, 20px); }

Con esto reduces las propiedades del contenedor de tres o cuatro a solo dos líneas.

¿Cómo agregar espaciado entre filas y columnas con gap?

Para separar visualmente las celdas se utiliza el espaciado o gap [2:18]. Históricamente se empleaban grid-column-gap y grid-row-gap, pero la especificación actual simplifica los nombres.

• column-gap: define el espacio entre columnas.
• row-gap: define el espacio entre filas.
• gap: unifica ambos valores en una sola propiedad.

css .contenedor { display: grid; grid-template: repeat(5, 20px) / repeat(5, 20px); gap: 10px 10px; /* filas columnas */ }

El primer valor de gap corresponde a las filas y el segundo a las columnas [2:50]. Con solo tres líneas de código defines la cuadrícula completa y su espaciado.

¿Qué son las áreas en CSS Grid y cómo se nombran?

Las áreas permiten asignar un nombre a cada celda o grupo de celdas de la cuadrícula [3:18]. Esto facilita la colocación de elementos porque, en lugar de indicar números de línea, simplemente refieres el nombre del área.

css .contenedor { display: grid; grid-template: repeat(5, 20px) / repeat(5, 20px); grid-template-areas: "header header header header header" "main main main . sidebar" "main main main . sidebar" "footer footer footer footer footer"; }

• Cada cadena entre comillas representa una fila.
• Los nombres repetidos expanden el área a lo largo de varias columnas o filas.
• Un punto (.) indica que esa celda quedará vacía [4:08].

Después, al estilizar un elemento hijo, basta con escribir grid-area: header; y se posicionará automáticamente en todas las celdas etiquetadas como header.

El reto propuesto consiste en tomar el diseño de tu proyecto, identificar los contenedores, y para cada uno definir cuántas filas y columnas necesita [4:25]. Esa planificación previa hace que la implementación en código sea mucho más ágil. ¿Ya identificaste los contenedores de tu diseño? Comparte tu avance en los comentarios.