Propiedad CSS grid-template-columns

La propiedad grid-template-columns define el número de columnas en un diseño de CSS Grid y el ancho (tamaño de pista) de cada una. Se establece en el contenedor de cuadrícula — el elemento con display: grid — y cada valor de la lista crea una pista de columna explícita.

Esta página cubre las palabras clave y funciones de dimensionamiento de pistas que se pueden pasar (fr, repeat(), minmax(), auto, fit-content()), cuándo usar cada una y los errores comunes. Para el equivalente en filas, consulta grid-template-rows; para definir columnas y filas juntas, consulta grid-template.

Valor inicial	none
Se aplica a	Contenedores de cuadrícula.
Heredable	No.
Animable	Sí. Las columnas son animables.
Versión	CSS Grid Layout Module Level 1
Sintaxis DOM	object.style.gridTemplateColumns = "40px 40px 40px";

Sintaxis

CSS grid-template-columns

grid-template-columns: none | auto | max-content | min-content | minmax() | <length> | <percentage> | <flex> | fit-content | repeat | initial | inherit;

Ejemplo de la propiedad grid-template-columns:

Ejemplo de código CSS grid-template-columns

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
        margin-top: 20px;
      }
      .example > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template-columns property example</h2>
    <div class="example">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Aquí 1fr 1fr 1fr 1fr crea cuatro columnas de igual ancho. La unidad fr ("fracción") divide el espacio restante en el contenedor después de restar los espacios intermedios, por lo que las cuatro pistas permanecen siempre iguales sin importar el ancho de pantalla. Los ocho elementos se distribuyen en dos filas implícitas porque solo hay cuatro columnas.

Resultado

Ejemplo de grid-template-columns aplicado al contenedor de cuadrícula:

Ejemplo de longitud CSS grid-template-columns

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: 40px 150px auto 80px;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template-columns property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Combinar pistas fijas y flexibles es el patrón más habitual en proyectos reales. En el ejemplo anterior, la primera columna mide exactamente 40px, la segunda 150px, la cuarta 80px, y la tercera (auto) absorbe el espacio restante.

Palabras clave y funciones de dimensionamiento de pistas

Raramente se listan todas las columnas a mano. Estas palabras clave y funciones mantienen el valor corto y adaptable.

repeat() — evita repetirte

repeat(count, size) se expande a count pistas del tamaño indicado. grid-template-columns: repeat(4, 1fr) es idéntico a 1fr 1fr 1fr 1fr. Combinado con auto-fill/auto-fit, encaja tantas pistas como el contenedor permite — la base de las cuadrículas de tarjetas adaptables:

/* As many 200px+ columns as fit; each grows to fill the row. */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

minmax() — define un mínimo y un máximo

minmax(min, max) permite que una pista crezca y se contraiga entre dos límites. minmax(200px, 1fr) nunca se hace más estrecha que 200px, pero se extiende para compartir el espacio sobrante. Úsalo para evitar que las columnas colapsen en pantallas pequeñas.

fr — reparte el espacio sobrante

La unidad fr distribuye el espacio que queda tras los tamaños fijos y los espacios intermedios. 2fr 1fr hace que la primera columna sea el doble de ancha que la segunda. A diferencia de los porcentajes, fr ya tiene en cuenta el espacio intermedio, por lo que las columnas no desbordan el contenedor.

auto, max-content, min-content, fit-content()

auto dimensiona una pista según su contenido pero permite que se estire; max-content la hace tan ancha como su contenido más largo sin interrupciones; min-content la reduce al mínimo que su contenido permite; fit-content(300px) se comporta como auto pero nunca supera el límite indicado.

Pruébalo en conjunto

<!DOCTYPE html>
<html>
  <head>
    <title>grid-template-columns with repeat and minmax</title>
    <style>
      .cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .cards > div {
        background-color: #6b9b37;
        color: #fff;
        text-align: center;
        padding: 30px 0;
        font-size: 24px;
      }
    </style>
  </head>
  <body>
    <h2>Responsive columns</h2>
    <div class="cards">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Cambia el tamaño de la vista previa: el número de columnas cambia automáticamente mientras cada tarjeta mantiene al menos 120px de ancho.

Valores

Valor	Descripción	Pruébalo
none	Es el valor predeterminado de la propiedad.	Pruébalo »
auto	El tamaño de la pista lo determina su contenido, pero puede crecer para llenar el espacio disponible.	Pruébalo »
max-content	El tamaño de cada columna depende del elemento más grande de la columna.	Pruébalo »
min-content	El tamaño de cada columna depende del elemento más pequeño de la columna.	Pruébalo »
minmax(min, max)	El rango de tamaño es mayor o igual que "min" y menor o igual que "max".	Pruébalo »
`<length>`	El tamaño de las columnas se especifica con un valor de longitud.	Pruébalo »
`<percentage>`	El tamaño de las columnas se especifica mediante porcentajes.	Pruébalo »
`<flex>`	Una dimensión no negativa con la unidad "fr" que especifica el factor de flexibilidad de la pista. Cada pista con tamaño `<flex>` comparte el espacio restante en proporción a su factor de flexibilidad.	Pruébalo »
fit-content	Representa min(max-content, max(auto, argumento)), similar a auto (es decir, minmax(auto, max-content)), pero el tamaño es mayor que el mínimo de auto.	Pruébalo »
repeat	Representa un fragmento repetido de la lista de pistas, que permite escribir de forma compacta un gran número de columnas con un patrón recurrente.	Pruébalo »
initial	Hace que la propiedad use su valor predeterminado.	Pruébalo »
inherit	Hereda la propiedad de su elemento padre.	Pruébalo »

Propiedades relacionadas

grid-template-rows — la misma idea para pistas horizontales (filas).
grid-template-areas — nombra regiones de la cuadrícula y coloca elementos por nombre.
grid-template — atajo que establece filas, columnas y áreas a la vez.
grid-auto-columns — dimensiona las columnas implícitas creadas más allá de la plantilla explícita.
grid — el atajo completo para toda la definición de cuadrícula.

Práctica

¿Cuál es la función de la propiedad 'grid-template-columns' en CSS?

Define el número de filas en un diseño de cuadrícula.Se usa para especificar los nombres de línea y las funciones de dimensionamiento de las columnas de la cuadrícula.Ayuda a alinear el texto dentro del diseño de cuadrícula.Establece el ancho y el número de columnas en un diseño de cuadrícula.Se usa para estilizar el color de fondo de la cuadrícula.