--- title: grid-template-rows slug: Web/CSS/grid-template-rows tags: - CSS - Propiedad CSS - Referencia - grid css translation_of: Web/CSS/grid-template-rows ---

La propiedad CSS grid-template-rows define el nombre de las líneas y las funciones de tamaño de línea de {{glossary("grid rows", "grid rows")}}.

{{EmbedInteractiveExample("pages/css/grid-template-rows.html")}}

Sintaxis

/* 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);
grid-template-rows: subgrid;

/* <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;

Esta propiedad puede especificarse como:

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 {{cssxref("grid-auto-rows")}}.
{{cssxref("<length>")}}
Es una longitud no negativa.
{{cssxref("<percentage>")}}
Es un valor no negativo {{cssxref("percentage", "<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.
{{cssxref("<flex_value>","<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.
{{cssxref("minmax", "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 {{cssxref("min-width")}}/{{cssxref("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 {{cssxref("align-content")}} and {{cssxref("justify-content")}}.

{{cssxref("fit-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.
{{cssxref("repeat", "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.
subgrid
El valor subgrid indica que la cuadrícula adoptara la porción que ocupa su cuadrícula principal (padre) en ese eje. En lugar de ser indicado de forma explícita, los tamaños de la las filas y columnas de la cuadrícula se tomarán de la definición de la cuadrícula superior.

El valor subgrid es del Nivel 2 de la especificación Grid y actualmente sólo tiene implementaciones en Firefox 71 y posteriores.

Sintaxis formal

{{csssyntax}}

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
{{SpecName("CSS3 Grid", "#propdef-grid-template-rows", "grid-template-rows")}} {{Spec2("CSS3 Grid")}} Definición inicial
{{SpecName("CSS Grid 2", "#subgrids", "subgrid")}} {{Spec2("CSS Grid 2")}} Incorpora subgrid

Compatibilidad de los navegadores

{{Compat("css.properties.grid-template-rows")}}

Ver también