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 October 2017.
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.
/* 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 comoauto
. 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>
-
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ónminmax()
, 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: Los tamaños de vía
auto
(y sólo los tamaños de víaauto
) pueden ser estirados por las propiedadesjustify-content
. fit-content( [ <length> | <percentage> ] )
-
Representa la fórmula
min(max-content, max(auto, argument))
, que se calcula de forma similar aauto
(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>* ']'
<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
#grid {
display: grid;
width: 100%;
grid-template-columns: 50px 1fr;
}
#areaA {
background-color: lime;
}
#areaB {
background-color: yellow;
}
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 |
Compatibilidad con navegadores
BCD tables only load in the browser
Ver también
- Propiedades CSS relacionadas:
grid-template-rows
,grid-template-areas
,grid-template
- Guía de grid layout: Basic concepts of grid layout - Grid Tracks
- Video tutorial: Defining a Grid