grid-template-columns

grid-template-columns define las pistas de columna de un contenedor grid: cuántas columnas tiene la cuadrícula y cuál es el tamaño de cada una. Es la propiedad central de Grid — junto con su equivalente para filas, grid-template-rows — porque es la que convierte un display: grid genérico en una cuadrícula con estructura real.

Sin grid-template-columns, un grid tiene una sola columna y los ítems se apilan en columna, igual que en flujo normal. Todo el poder de Grid aparece cuando se declaran las pistas: grid-template-columns: 200px 1fr ya define dos columnas con tamaños distintos, y los ítems empiezan a colocarse en la cuadrícula automáticamente.

La propiedad acepta una lista de tamaños separados por espacio — uno por columna. Con tres valores, hay tres columnas; con cinco valores, cinco columnas. Eso parece sencillo, pero grid-template-columns esconde todo un sistema de funciones y unidades propias de Grid: la unidad fr para repartir el espacio sobrante, repeat() para evitar repetir el mismo valor, minmax() para pistas elásticas con piso y techo, y los valores auto-fill/auto-fit para grids que generan sus propias columnas según el espacio disponible.

Sintaxis

/* Valores fijos */
.grid {
  display: grid;
  grid-template-columns: 200px 200px 200px;   /* 3 columnas de 200px */
}

/* Unidad fr — fracciones del espacio disponible */
.grid {
  grid-template-columns: 1fr 1fr 1fr;         /* 3 columnas iguales */
  grid-template-columns: 1fr 2fr 1fr;         /* centro el doble de ancho */
  grid-template-columns: 250px 1fr;           /* sidebar fija + contenido fluido */
}

/* repeat() — azúcar para pistas repetidas */
.grid {
  grid-template-columns: repeat(3, 1fr);      /* equivale a 1fr 1fr 1fr */
  grid-template-columns: repeat(12, 1fr);     /* grilla de 12 columnas */
}

/* minmax() — pistas con piso y techo */
.grid {
  grid-template-columns: repeat(3, minmax(150px, 1fr));
}

/* auto-fit con minmax — el patrón responsive */
.grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

Valores y sub-bloques

Longitudes y porcentajes (px, em, rem, %)

Cualquier unidad de longitud CSS. px da pistas fijas; % es relativo al ancho del contenedor. El problema de % es que no descuenta los gaps: repeat(3, 33.33%) más dos gaps de 16px produce overflow. Por eso en la práctica se usa fr — que sí descuenta los gaps antes de repartir.

grid-template-columns: 250px 1fr;    /* sidebar fija, contenido fluido */
grid-template-columns: 200px auto;   /* primera fija, segunda se adapta al contenido */

auto

La pista con auto se ajusta al tamaño de su contenido (mínimo) pero puede crecer si sobra espacio. Útil para columnas que se adaptan al texto sin declarar un tamaño fijo.

La unidad fr — fracciones del espacio sobrante

fr (de fraction) es la unidad propia de Grid. Representa una fracción del espacio disponible después de restar los valores fijos y los gaps. No es equivalente a %: el porcentaje se calcula sobre el total sin descontar nada; fr se calcula sobre lo que sobra.

/* Con un contenedor de 900px y gap: 16px entre 3 columnas (32px de gaps) */
grid-template-columns: 1fr 1fr 1fr;
/* Espacio disponible = 900 - 32 = 868px → cada fr = 868/3 ≈ 289px */

grid-template-columns: 1fr 2fr 1fr;
/* Total fr = 4 → 1fr ≈ 217px, 2fr ≈ 434px */

El gotcha clásico de fr y el contenido: fr cede ante el contenido mínimo del ítem. Si un ítem tiene texto muy largo, la columna de 1fr que lo contiene puede crecer más de lo esperado, “robando” espacio a las otras. Solución: usar minmax(0, 1fr) en lugar de 1fr cuando se necesita que la pista ignore el contenido mínimo y pueda comprimirse hasta 0.

repeat() — azúcar sintáctica

repeat(cantidad, tamaño) evita repetir el mismo valor. Es solo comodidad — el resultado es idéntico a escribir el valor N veces:

/* Equivalentes */
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-columns: repeat(4, 1fr);

/* También funciona con valores mixtos */
grid-template-columns: repeat(3, 1fr 2fr);  /* = 1fr 2fr 1fr 2fr 1fr 2fr */

Con muchas columnas (una grilla de 12), repeat(12, 1fr) es mucho más legible que doce 1fr separados.

minmax() — pistas con piso y techo

minmax(min, max) define un rango de tamaño para una pista: la pista no será más pequeña que min ni más grande que max. Es la forma de crear pistas elásticas que tienen garantizado un mínimo.

/* Cada pista: al menos 150px, hasta 1fr */
grid-template-columns: repeat(3, minmax(150px, 1fr));

/* Sidebar que se achica pero no más de 150px */
grid-template-columns: minmax(150px, 250px) 1fr;

Cuando min es mayor que max, min gana y el valor de max se ignora.

auto-fill y auto-fit — columnas automáticas

Estos valores especiales dentro de repeat() le dicen al navegador que cree tantas pistas como quepan en el contenedor, sin que el desarrollador tenga que declarar un número fijo:

/* auto-fill: crea tantas columnas de al menos 200px como quepan */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

/* auto-fit: igual, pero colapsa las columnas vacías */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

La diferencia entre auto-fill y auto-fit es sutil pero importante. Imaginá un contenedor de 1000px que puede albergar 4 columnas de 250px, pero solo tiene 2 ítems:

• auto-fill: crea las 4 columnas. Los 2 ítems ocupan las primeras 2; las otras 2 quedan vacías. Los ítems no se expanden para llenar el espacio.
• auto-fit: crea las 4 columnas pero colapsa las 2 vacías (las reduce a width: 0). Los 2 ítems se expanden cada uno a 1fr del espacio disponible y llenan el contenedor.

Con muchos ítems que llenan todas las columnas, auto-fill y auto-fit producen el mismo resultado.

El patrón canónico responsive

La combinación de repeat(auto-fit, minmax()) es el patrón más potente de Grid para layouts responsive sin media queries:

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

Con este código, en un contenedor de 1000px caben 5 columnas de 200px; si el contenedor se achica a 600px, caben 3; a 400px, 2. Las columnas se reorganizan solas sin ninguna @media query. Cada columna tiene garantizado un mínimo de 200px antes de “saltar” a la fila siguiente.

grid-template-rows — el mismo eje en filas

grid-template-rows define las pistas de fila del grid. Acepta exactamente los mismos valores que grid-template-columns — longitudes fijas, fr, repeat(), minmax() — con la diferencia de que aplica al eje de bloque (vertical).

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 60px 1fr 50px;  /* header / contenido / footer */
}

La diferencia clave con grid-template-columns es que las filas raramente necesitan ser fluidas en la misma forma: el contenido suele determinar la altura de las filas, y en muchos layouts se deja grid-template-rows sin declarar para que el grid implícito cree filas automáticamente del tamaño que necesita el contenido.

Los valores auto-fill/auto-fit no se usan en grid-template-rows porque las filas no tienen un ancho contenedor del que derivar cuántas caben — ese cálculo solo tiene sentido en el eje de columnas.

Cuándo usarlo

Usá grid-template-columns siempre que necesites una cuadrícula con más de una columna. Los casos más comunes:

Resultado

Notas, gotchas e interacción

• fr cede ante el contenido mínimo. Si un ítem tiene contenido muy ancho (una imagen, una palabra larga sin wrap), la pista 1fr no puede comprimirse por debajo de ese contenido mínimo. Para ignorar el contenido mínimo, usá minmax(0, 1fr).
• repeat(auto-fill, ...) con un número pequeño de ítems. Si usás auto-fill y los ítems no llenan todas las columnas generadas, quedan columnas vacías que ocupan espacio — el layout puede verse desbalanceado. En ese caso, auto-fit produce un resultado más esperado.
• grid-template-columns no crea filas automáticas. Las filas adicionales se generan como grid implícito. Para controlar su tamaño, usá grid-auto-rows.
• % en pistas produce overflow con gap. Tres columnas de 33.33% + dos gaps de 16px = 100% + 32px de overflow. Usá 1fr en su lugar, que descuenta el gap antes de repartir.
• grid-template-rows: auto es el valor implícito. Si no declarás grid-template-rows, las filas se crean automáticamente con height: auto — crecen según el contenido de su ítem más alto.
• Interacción con gap: gap agrega espacio entre pistas; las unidades fr lo descuentan antes de calcular su tamaño.

Vigente / legacy

grid-template-columns es parte del estándar CSS Grid Level 1 (2017) y es baseline widely available. No existen alternativas legacy equivalentes. Los nombres grid-* (como grid-column-gap) son la nomenclatura antigua de Grid — hoy se usan sin el prefijo grid-.