grid-template-columns
=====================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
La propiedad CSS **`grid-template-columns`** define el nombre de las líneas y las funciones de tamaño de línea de grid columns.


```css
/\* Keyword value \*/
grid-template-columns: none;

/\* <track-list> values \*/
grid-template-columns: 100px 1fr;
grid-template-columns: [linename] 100px;
grid-template-columns: [linename1] 100px [linename2 linename3];
grid-template-columns: minmax(100px, 1fr);
grid-template-columns: fit-content(40%);
grid-template-columns: repeat(3, 200px);

/\* <auto-track-list> values \*/
grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
grid-template-columns:
  minmax(100px, max-content)
  repeat(auto-fill, 200px) 20%;
grid-template-columns:
  [linename1] 100px [linename2]
  repeat(auto-fit, [linename3 linename4] 300px)
  100px;
grid-template-columns:
  [linename1 linename2] 100px
  repeat(auto-fit, [linename1] 300px) [linename3];

/\* Global values \*/
grid-template-columns: inherit;
grid-template-columns: initial;
grid-template-columns: unset;
```


|  |  |
| --- | --- |
| Valor inicial | `none` |
| Applies to | grid containers |
| Heredable | no |
| Percentages | refer to corresponding dimension of the content area |
| Valor calculado | as specified, but with relative lengths converted into absolute lengths |
| Animation type | simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list |

Sintaxis
--------

### Valores

`none`

Es una palabra clave que significa que no hay una cuadrícula explícita. Cualquier columna será generada implicitamente y su tamaño sera determinado por la propiedad `grid-auto-columns`.

`<length>`

Es una longitud no negativa.

`<percentage>`

 Es un valor no negativo `<percentage>`, relativo al tamaño del bloque del contenedor grid. Si el tamaño del contenedor de la cuadrícula depende del tamaño de sus vías, entonces el porcentaje debe de tratarse como `auto`.
 Las contribuciones de tamaño intrínseco de la vía puede ser ajustado al tamaño del contenedor de la cuadrícula, e incrementar el tamaño final de la vía por la cantidad mínima que permita mantener el porcentaje.


`<flex>` (en-US)

Es una dimensión no negativa con la unidad `fr` especificando el factor de flexibilidad de la vía. Cada vía de tamaño- `<flex>` toma un trozo del espacio restante en proporción a su factor de flexibilidad. Cuando aparece en una notación `minmax()`, implica un mínimo automático (es decir, `minmax(auto, <flex>)`).

`max-content`

Es una palabra clave representando la mayor contribución máxima de contenido de los elementos de la cuadrícula ocupando las vías de ésta.

`min-content`

Es una palabra clave representando la mayor contribución mínima de contenido de los elementos de la cuadrícula ocupando las vías de ésta.

`minmax(min, max)`

Es una notación funcional que define un rango de tamaño, mayor o igual que *min*, y menor o igual que *max*. Si *max* es menor a *min*, entonces *max* es ignorado y la función es tratada como *min*. Como un máximo, un valor `<flex>` ajusta el factor de flexibilad de la vía. Es inválido utilizarlo como un mínimo.

`auto`

Es una palabra clave que es idéntica al contenido máximo si es un máximo. Como un mínimo representa el mínimo más grande (según lo especificado por `min-width`/`min-height`) de los elementos de la cuadrícula ocupando la vía.

**Nota:** Nota: Los tamaños de vía `auto` (y sólo los tamaños de vía `auto` ) pueden ser estirados por las propiedades `justify-content`.

``fit-content( [ <length> | <percentage> ] )``

Representa la fórmula `min(max-content, max(auto, argument))`, que se calcula de forma similar a `auto` (es decir, `minmax(auto, max-content)`), excepto que el tamaño de la vía se fija a *argument* si es mayor que el mínimo.

`repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )`

Representa un fragmento repetido de la lista de vías, permitiendo que un gran número de columnas que muestran un patrón recurrente se escriban de una manera más compacta.

### Sintaxis formal
```

grid-template-columns =   
  none                       |  
  <track-list>               |  
  <auto-track-list>          |  
  subgrid <line-name-list>?    
  
<track-list> =   
  [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?    
  
<auto-track-list> =   
  [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]\* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]\* <line-names>?    
  
<line-name-list> =   
  [ <line-names> | <name-repeat> ]+    
  
<line-names> =   
  '[' <custom-ident> (en-US)\* ']'    
  
<track-size> =   
  <track-breadth>                                   |  
  minmax( <inflexible-breadth> , <track-breadth> )  |  
  fit-content( <length-percentage [0,∞]> )            
  
<track-repeat> =   
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )    
  
<fixed-size> =   
  <fixed-breadth>                                   |  
  minmax( <fixed-breadth> , <track-breadth> )       |  
  minmax( <inflexible-breadth> , <fixed-breadth> )    
  
<fixed-repeat> =   
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )    
  
<auto-repeat> =   
  repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )    
  
<name-repeat> =   
  repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )    
  
<track-breadth> =   
  <length-percentage [0,∞]>  |  
  <flex [0,∞]>               |  
  min-content                |  
  max-content                |  
  auto                         
  
<inflexible-breadth> =   
  <length-percentage [0,∞]>  |  
  min-content                |  
  max-content                |  
  auto                         
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
<fixed-breadth> =   
  <length-percentage [0,∞]>    
  
```

Ejemplos
--------

### CSS


```css
#grid {
  display: grid;
  width: 100%;
  grid-template-columns: 50px 1fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}
```

### HTML


```html
<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
</div>
```

### Resultado

Especificaciones
----------------

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # track-sizing |
| CSS Grid Layout Module Level 2 # subgrids |
| CSS Grid Layout Module Level 3 # masonry-layout |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* Propiedades CSS relacionadas: `grid-template-rows`, `grid-template-areas`, `grid-template` (en-US)
* Guía de grid layout: *Basic concepts of grid layout - Grid Tracks*
* Video tutorial: *Defining a Grid*