Propiedad CSS grid-template-rows

La propiedad grid-template-rows define cuántas filas tiene una cuadrícula CSS y qué altura tiene cada una. Se listan los tamaños de pista uno tras otro, separados por espacios, y CSS crea una fila explícita por cada valor. Así, grid-template-rows: 100px 200px crea dos filas: la primera de 100 px de alto y la segunda de 200 px.

Esta propiedad solo afecta a los contenedores de cuadrícula (elementos con display: grid o display: inline-grid). Es la contraparte en dirección de filas de grid-template-columns, y ambas se escriben juntas con frecuencia para definir una cuadrícula completa.

El tamaño de una pista puede ser una longitud fija, un porcentaje, una unidad flexible fr, una palabra clave basada en el contenido o una función como repeat() y minmax(). Combinarlas es lo que hace que los diseños de cuadrícula sean flexibles:

Usa una longitud (px, rem) cuando quieras que una fila tenga una altura exacta.
Usa fr cuando quieras que las filas compartan el espacio sobrante de forma proporcional.
Usa auto o min-content / max-content cuando la fila deba crecer para adaptarse a su contenido.
Usa repeat() para evitar escribir el mismo tamaño muchas veces.
Usa minmax() cuando una fila necesite un mínimo y un máximo (por ejemplo, "al menos 100px, pero que crezca si es necesario").

Información

Las filas que creas aquí forman la cuadrícula explícita. Si los elementos desbordan hacia filas que no definiste, esas filas adicionales las dimensiona grid-auto-rows en su lugar.

Valor inicial	none
Se aplica a	Contenedores de cuadrícula.
Heredable	No.
Animatable	Sí. El tamaño de las filas es animatable.
Versión	CSS Grid Layout Module Level 1
Sintaxis DOM	`object.style.gridTemplateRows = "20px 100px"`

Sintaxis

grid-template-rows: none
                  | auto
                  | max-content
                  | min-content
                  | <length>
                  | <percentage>
                  | <flex>           /* e.g. 1fr */
                  | fit-content(<length-percentage>)
                  | repeat(<count>, <track-list>)
                  | minmax(<min>, <max>)
                  | subgrid
                  | [line-name] <track-size> [line-name];

Las palabras clave estándar initial e inherit también se aplican, como ocurre con cualquier propiedad CSS.

Uso básico

Filas dimensionadas automáticamente

Con auto, cada fila crece para adaptarse a la celda más alta. Este es el punto de partida más habitual.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .auto-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-template-rows: auto auto;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
        margin-top: 30px;
      }
      .auto-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>grid-template-rows: auto auto</h2>
    <div class="auto-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>

Pruébalo tú mismo »

Con grid-template-rows: auto auto, ambas filas crecen para adaptarse a su contenido, por lo que todas las celdas tienen la misma altura que la hermana más alta de esa fila.

Filas de altura fija

Pasa valores en píxeles para fijar las filas a una altura exacta independientemente del contenido.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-template-rows: 100px 300px;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>grid-template-rows: 100px 300px</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>

Pruébalo tú mismo »

Aquí las filas son fijas: la primera siempre tiene 100 px de alto y la segunda siempre 300 px, independientemente de cuánto contenido tengan las celdas. El contenido que desborde esas alturas se recorta o tiene scroll según la configuración de overflow.

Unidades fr, repeat() y minmax()

La unidad fr

fr ("fracción") representa una parte del espacio libre que queda en la cuadrícula después de colocar las pistas de tamaño fijo. El espacio libre es el tamaño total de la cuadrícula menos el espacio ocupado por las pistas con tamaños absolutos o basados en el contenido.

/* Three equal rows */
grid-template-rows: 1fr 1fr 1fr;

/* Header takes half, body takes the other half */
grid-template-rows: 1fr 1fr;

/* Header is fixed, body gets all remaining space */
grid-template-rows: 80px 1fr;

La unidad fr es útil cuando la cuadrícula tiene una altura conocida (definida en el contenedor) y se quiere que las pistas la rellenen sin hacer ningún cálculo.

repeat()

repeat(count, track-list) es una forma abreviada de repetir uno o más tamaños de pista.

/* Same as: 1fr 1fr 1fr 1fr */
grid-template-rows: repeat(4, 1fr);

/* Alternating: 80px 1fr 80px 1fr */
grid-template-rows: repeat(2, 80px 1fr);

minmax()

minmax(min, max) asigna a una pista un tamaño mínimo y un tamaño máximo. El navegador determina el tamaño real dentro de ese rango según el contenido y el espacio disponible.

/* Row is at least 80px; grows with content up to 200px */
grid-template-rows: minmax(80px, 200px);

/* Row is at least 80px; grows to fill remaining space */
grid-template-rows: minmax(80px, 1fr);

Combinando las tres

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-grid {
        display: grid;
        height: 600px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(2, 1fr) minmax(80px, auto);
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .flex-grid > div {
        background-color: #eee;
        text-align: center;
        padding: 10px;
        font-size: 24px;
      }
    </style>
  </head>
  <body>
    <h2>fr, repeat() and minmax()</h2>
    <div class="flex-grid">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

La cuadrícula tiene 600 px de alto. repeat(2, 1fr) crea dos filas que comparten a partes iguales la altura disponible. La tercera fila usa minmax(80px, auto): tiene al menos 80 px de alto, pero se expande si su contenido crece por encima de ese valor.

Pistas con líneas con nombre

Puedes asignar un nombre a las líneas entre filas envolviéndolo entre corchetes. Las líneas con nombre facilitan mucho la colocación de elementos con grid-row sin tener que contar líneas de cuadrícula.

.layout {
  display: grid;
  grid-template-rows:
    [header-start] 80px [header-end body-start]
    1fr
    [body-end footer-start] 60px [footer-end];
}

/* Place an item from body-start to body-end */
.main {
  grid-row: body-start / body-end;
}

Una línea puede tener varios nombres separados por espacios dentro de los mismos corchetes: [header-end body-start] significa que esa misma línea es el final del encabezado y el inicio del cuerpo.

Palabras clave basadas en el contenido

auto

auto significa que la pista se dimensiona según su contenido (equivalente a minmax(auto, auto)). La fila crece hasta el elemento más alto que contenga, pero no se reducirá por debajo del tamaño mínimo del contenido. Cuando también hay pistas fr en la misma declaración, las pistas auto se resuelven primero y las pistas fr comparten el espacio restante.

min-content

La fila tiene exactamente la altura suficiente para ajustarse al contenido más pequeño de cualquiera de sus celdas; en la práctica, tan alta como la palabra más larga o la imagen más pequeña.

max-content

La fila tiene la altura suficiente para ajustarse al contenido más grande sin ajuste de línea. Equivalente a dar a cada celda todo el espacio vertical que desee.

fit-content(`<value>`)

fit-content(200px) se comporta como auto (crece con el contenido) pero tiene como límite máximo el argumento proporcionado. Equivalente a min(max-content, max(auto, 200px)). Es útil cuando quieres que una fila tenga un tamaño basado en el contenido pero que nunca supere un límite determinado.

subgrid

Cuando un elemento de cuadrícula es a su vez un contenedor de cuadrícula, usar subgrid en grid-template-rows indica a esa cuadrícula interna que utilice las pistas de fila de la cuadrícula padre en lugar de crear las suyas propias. Esto permite alinear el contenido dentro de los elementos de cuadrícula anidados con el ritmo de la cuadrícula exterior.

.parent {
  display: grid;
  grid-template-rows: 80px 1fr 60px;
}

.child {
  display: grid;
  /* This child spans 3 rows of the parent */
  grid-row: 1 / 4;
  /* Adopt those same 3 row tracks */
  grid-template-rows: subgrid;
}

subgrid tiene amplia compatibilidad desde finales de 2023 (Chrome 117+, Firefox 71+, Safari 16+).

auto-fill y auto-fit en repeat()

auto-fill y auto-fit se usan dentro de repeat() para crear tantas pistas como quepan en el contenedor. Se ven con más frecuencia en grid-template-columns, pero funcionan de forma idéntica con las filas cuando el contenedor tiene una altura fija.

/* As many rows of at least 100px as will fit */
grid-template-rows: repeat(auto-fill, minmax(100px, 1fr));

auto-fill — rellena la cuadrícula con tantas pistas como sea posible, aunque algunas estén vacías.
auto-fit — igual que auto-fill, pero colapsa las pistas vacías a tamaño cero para que los elementos se estiren y ocupen el espacio disponible.

Valores

Valor	Descripción
`none`	Predeterminado. No se definen filas explícitas; todas las filas son implícitas.
`auto`	La altura de la fila la determina su contenido o el espacio disponible.
`max-content`	La fila es tan alta como el tamaño intrínseco mayor entre sus elementos.
`min-content`	La fila es tan alta como el tamaño intrínseco menor entre sus elementos.
`minmax(min, max)`	El tamaño de la pista está dentro del rango dado. `min` no puede ser `fr`; `max` sí puede serlo.
`<length>`	Una altura fija como `100px` o `2rem`.
`<percentage>`	Una altura relativa a la altura del contenedor de cuadrícula (debe ser definida).
`<flex>` (`fr`)	Una dimensión no negativa que toma una parte del espacio libre restante.
`fit-content(<value>)`	Dimensionada según el contenido, con el límite máximo del argumento proporcionado.
`repeat(count, tracks)`	Repite un patrón de tamaños de pista. `count` puede ser un número, `auto-fill` o `auto-fit`.
`subgrid`	La lista de pistas se hereda de la cuadrícula padre.
`initial`	Restablece la propiedad a su valor predeterminado (`none`).
`inherit`	Hereda el valor del elemento padre.

Problemas comunes

fr requiere una altura definida en el contenedor. Si el contenedor de cuadrícula no tiene una height explícita, no hay espacio libre para que las filas fr lo repartan: colapsan al dimensionado auto. Establece siempre una height (o min-height) en el contenedor cuando uses fr en filas.
Los porcentajes también requieren una altura definida en el contenedor por la misma razón. Si la altura del contenedor es intrínseca, los tamaños de fila en porcentaje también se resuelven como auto.
Solo filas explícitas. Esta propiedad dimensiona las filas que declaras. Las filas adicionales generadas por los elementos desbordados las dimensiona grid-auto-rows; esas filas implícitas tienen valor predeterminado auto si no se define grid-auto-rows.
minmax(0, 1fr) vs 1fr. La unidad fr tiene un mínimo implícito de auto, por lo que las filas 1fr no pueden reducirse por debajo de su tamaño de contenido. Usa minmax(0, 1fr) cuando quieras explícitamente que las filas se reduzcan por debajo del contenido, por ejemplo dentro de contenedores con scroll.

Práctica

¿Qué hace la propiedad grid-template-rows en CSS?

Define el número de filas en un diseño de cuadrícula.Especifica el tamaño de las filas en un diseño de cuadrícula.Crea el diseño de cuadrícula en CSS.Controla el espacio entre cada fila en un diseño de cuadrícula.Define el orden de las capas en un diseño de cuadrícula.

Propiedades relacionadas

grid-template-columns — la contraparte en dirección de columnas de esta propiedad.
grid-auto-rows — dimensiona las filas creadas de forma implícita, fuera de la cuadrícula explícita.
grid-template-areas — asigna nombres a las áreas de la cuadrícula para colocar elementos por referencia.
grid-template — forma abreviada de filas, columnas y áreas en una sola declaración.
grid-row — forma abreviada para colocar o expandir un elemento de cuadrícula a lo largo de las pistas de fila.
grid-auto-flow — controla la dirección y el algoritmo de empaquetado para los elementos colocados automáticamente.
grid — la forma abreviada completa de cuadrícula y punto de partida para el diseño de cuadrícula.