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.
