Grid templates
grid-template-colums and grid-template-rows
Estas propiedades son el corazón de CSS Grid, ya que te permiten definir la estructura fundamental de tu cuadrícula: cuántas columnas y filas tendrá y qué tamaño ocuparán.
grid-template-columns
Esta propiedad define el número y el tamaño de las columnas de tu rejilla. Simplemente le pasas una lista de valores de tamaño, y cada valor representa una columna.
¿Qué unidades y valores puedo darle a estas columnas?
- px (píxeles): Un tamaño fijo. grid-template-columns: 200px 500px; (Dos columnas, una de 200px y otra de 500px).
- % (porcentaje): Un tamaño relativo al ancho del contenedor. grid-template-columns: 25% 75%; (Dos columnas, una ocupa el 25% y la otra el 75% del ancho).
- auto: La columna se ajusta al ancho de su contenido. Es útil, pero a veces impredecible.
- fr (unidad fraccional): Esta es la unidad estrella de Grid. Representa una fracción del espacio disponible. Imagina que el espacio sobrante es un pastel 🍰. La unidad fr lo divide en porciones.
Nota: Podemos combinar varias unidades diferentes, pudiendo utilizar píxeles (px), fracciones restantes (fr), porcentajes (%) de forma simultánea.
grid-template-rows
Funciona exactamente igual que grid-template-columns, pero en este caso para definir el número y la altura de las filas.
Le pasas una lista de valores, y cada valor representa la altura de una fila. Acepta las mismas unidades (px, %, auto, fr) y la función repeat().
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* La primera fila (header) mide 100px, la segunda (contenido) es flexible y la tercera (footer) mide 50px */
grid-template-rows: 100px 1fr 50px;
height: 500px; /* Necesitamos una altura en el contenedor para que 'fr' funcione en las filas */
}En este caso, la fila del medio (1fr) ocupará todo el espacio vertical disponible después de restar los 100px de la primera fila y los 50px de la tercera.
grid-template (atajo)
Esta es una propiedad de atajo que te permite definir grid-template-rows y grid-template-columns (e incluso grid-template-areas que ya veremos) en una sola declaración, haciendo tu código más limpio y corto.
La sintaxis es: grid-template: <filas> / <columnas>;
La barra inclinada / es crucial, ya que separa las definiciones de las filas (lo que va antes) de las definiciones de las columnas (lo que va después).
.container {
display: grid;
grid-template-rows: 100px 1fr;
grid-template-columns: 200px 1fr 1fr;
}Ambos códigos producen exactamente el mismo resultado, pero el segundo es más conciso.