Traducción en curso

La propiedad CSS grid-template-rows define el nombre de las líneas y las funciones de tamaño de línea de grid rows.

/* Keyword value */
grid-template-rows: none;

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

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

/* Global values */
grid-template-rows: inherit;
grid-template-rows: initial;
grid-template-rows: unset;

Valor inicialnone
Applies togrid containers
Heredableno
Percentagesrefer to corresponding dimension of the content area
Mediavisual
Valor calculadoas specified, but with relative lengths converted into absolute lengths
Animation typediscrete
Canonical orderel orden único no-ambigüo definido por la gramática formal

Sintaxis

Esta propiedad puede especificarse como:

  • el valor de la palabra clave none
  • o un valor de <track-list>
  • o un valor de <auto-track-list>.

Valores

none
Es una palabra clave que significa que no hay una cuadrícula explícita. Cualquier fila será generada implicitamente y su tamaño sera determinado por la propiedad grid-auto-rows.
<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>
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 (i.e. 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ía auto ) pueden ser estirados por las propiedades align-content and 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 auto.
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 filas que muestran un patrón recurrente se escriban de una manera más compacta.

Sintaxis formal

none | <track-list> | <auto-track-list>

where
<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>?

where
<line-names> = '[' <custom-ident>* ']'
<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )
<track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )
<fixed-size> = <fixed-breadth> | minmax( <fixed-breadth> , <track-breadth> ) | minmax( <inflexible-breadth> , <fixed-breadth> )
<fixed-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

where
<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto
<fixed-breadth> = <length-percentage>

where
<length-percentage> = <length> | <percentage>

Ejemplos

CSS

#grid {
  display: grid;
  height: 100px;
  grid-template-rows: 30px 1fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}

HTML

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

Result

Especificaciones

Especificación Estado Comentario
CSS Grid Layout
La definición de 'grid-template-rows' en esta especificación.
Candidate Recommendation Definición inicial

Compatibilidad de los navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Soporte básicoChrome Soporte completo 57
Soporte completo 57
Soporte completo 29
Deshabilitado
Deshabilitado From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Soporte completo 16Firefox Soporte completo 52
Soporte completo 52
Soporte completo 40
Deshabilitado
Deshabilitado From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 44
Soporte completo 44
Soporte completo 28
Deshabilitado
Deshabilitado From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Soporte completo 10.1WebView Android Soporte completo 57Chrome Android Soporte completo 57
Soporte completo 57
Soporte completo 29
Deshabilitado
Deshabilitado From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Mobile Soporte completo 16Firefox Android Soporte completo 52
Soporte completo 52
Soporte completo 40
Deshabilitado
Deshabilitado From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 44Safari iOS Soporte completo 10.3Samsung Internet Android Soporte completo 6.0
minmax()Chrome Soporte completo 57
Soporte completo 57
Soporte completo 29
Deshabilitado
Deshabilitado From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Soporte completo 12Firefox Soporte completo 52
Soporte completo 52
Soporte completo 40
Deshabilitado
Deshabilitado From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE ? Opera Soporte completo 44
Soporte completo 44
Soporte completo 28
Deshabilitado
Deshabilitado From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Soporte completo 10.1WebView Android Sin soporte NoChrome Android ? Edge Mobile Soporte completo 12Firefox Android Soporte completo 52
Soporte completo 52
Soporte completo 40
Deshabilitado
Deshabilitado From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Sin soporte NoSafari iOS Soporte completo 10.3Samsung Internet Android ?
repeat()Chrome Soporte completo 57
Soporte completo 57
Soporte completo Si
Deshabilitado
Deshabilitado This feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Soporte completo 16Firefox Soporte completo 52
Notas
Soporte completo 52
Notas
Notas calc() doesn't work in repeat() (see bug 1350069).
Soporte completo Si
Deshabilitado
Deshabilitado This feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 44
Soporte completo 44
Soporte completo Si
Deshabilitado
Deshabilitado This feature is behind the Enable experimental Web Platform features preference.
Safari Soporte completo 10.1WebView Android ? Chrome Android ? Edge Mobile Sin soporte NoFirefox Android Soporte completo 52
Notas
Soporte completo 52
Notas
Notas calc() doesn't work in repeat() (see bug 1350069).
Soporte completo Si
Deshabilitado
Deshabilitado This feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS Soporte completo 10.3Samsung Internet Android ?
fit-content()Chrome Soporte completo 29Edge Soporte completo 16Firefox Soporte completo 51IE Sin soporte NoOpera Soporte completo 44Safari Soporte completo 10.1WebView Android Soporte completo 57Chrome Android Soporte completo 57Edge Mobile Soporte completo 16Firefox Android Soporte completo 51Opera Android Soporte completo 44Safari iOS Soporte completo 10.3Samsung Internet Android Soporte completo 7.0

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibility unknown  
Compatibility unknown
Ver notas de implementación.
Ver notas de implementación.
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.

Ver también

Etiquetas y colaboradores del documento

Etiquetas: 
Colaboradores en esta página: fscholz, IsraelFloresDGA
Última actualización por: fscholz,