Propiedad CSS grid-template-columns

La propiedad grid-template-columns define el tamaño (ancho) de cada columna en el diseño de cuadrícula:

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

css

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

html

<!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>

Try it Yourself »

Resultado

CSS grid-template-columns length

Ejemplo de grid-template-columns aplicado a grid-container:

Ejemplo de longitud CSS grid-template-columns

html

<!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>

Try it Yourself »

Valores

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

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 utiliza para especificar los nombres de línea y las funciones de tamaño de pista 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 utiliza para dar estilo al color de fondo de la cuadrícula.

Propiedad CSS grid-template-columns ​

Sintaxis ​

Ejemplo de la propiedad grid-template-columns: ​

Resultado ​

Ejemplo de grid-template-columns aplicado a grid-container: ​

Valores ​