Propiedad CSS grid-template-rows

La propiedad grid-template-rows define el tamaño de las filas en un diseño de cuadrícula (grid). El número de filas está determinado por la cantidad de valores proporcionados, aunque también se puede controlar usando repeat() con auto-fill o auto-fit. Los valores están separados por espacios y cada uno especifica el tamaño de la pista (track) de la fila.

INFO

Además de los valores principales, existen valores adicionales como fit-content y repeat() que ayudan a crear diseños de cuadrícula flexibles y compactos.

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

Sintaxis

Sintaxis de CSS grid-template-rows

css

grid-template-rows: none | auto | max-content | min-content | <flex> | fit-content | repeat(...) | <length> | <percentage> | minmax() | subgrid | auto-fill | auto-fit;

Nota: initial e inherit son palabras clave estándar de CSS para restablecer o heredar valores, pero rara vez se necesitan en los diseños de cuadrícula modernos.

Ejemplo de la propiedad grid-template-rows:

Ejemplo de código CSS grid-template-rows

html

<!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 property example</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>

Try it Yourself »

Resultado

CSS grid-template-rows example result

Ejemplo de la propiedad grid-template-rows con el tamaño especificado de las filas:

Otro ejemplo de código CSS grid-template-rows

html

<!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 property example</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>

Try it Yourself »

Valores

Valor	Descripción
none	Este es el valor predeterminado de la propiedad.
auto	El tamaño de la fila está determinado por su contenido o el espacio disponible.
max-content	El tamaño de cada fila está determinado por el tamaño intrínseco más grande de sus elementos.
min-content	El tamaño de cada fila está determinado por el tamaño intrínseco más pequeño de sus elementos.
minmax(min, max)	Define un tamaño de pista como un rango de tamaño mayor o igual a `min` y menor o igual a `max`. Funciona como una función de dimensionamiento de pista.
`<length>`	El tamaño de las filas se especifica mediante un valor de longitud.
`<percentage>`	El tamaño de las filas se especifica mediante porcentajes.
`<flex>`	Una dimensión no negativa con la unidad `fr` (fracción del espacio disponible) que especifica el factor de flexibilidad de la pista. Cada pista de tamaño `<flex>` comparte el espacio restante en proporción a su factor de flexibilidad.
fit-content	Representa `min(max-content, max(auto, argumento))`. Similar a `auto` (`minmax(auto, max-content)`), pero asegura que el tamaño de la pista sea al menos el argumento proporcionado.
repeat(...)	Representa un fragmento repetido de la lista de pistas, permitiendo que una gran cantidad de filas que muestran un patrón recurrente se escriban en una forma más compacta. Este valor es ampliamente compatible con los navegadores modernos.
subgrid	Indica que la cuadrícula adoptará la porción extendida de su cuadrícula padre en el eje especificado. Los tamaños de las filas/columnas de la cuadrícula se toman de la definición de la cuadrícula padre.
auto-fill	Coloca tantas filas como quepan en la cuadrícula sin desbordar el contenedor.
auto-fit	Similar a `auto-fill`, pero colapsa las pistas vacías a un tamaño cero.
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

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/los tamaño(s) de las filas en un diseño de cuadrícula.Crea el diseño de cuadrícula en CSS.Controla la cantidad de espacio entre cada fila en un diseño de cuadrícula.Define el orden de las capas en un diseño de cuadrícula.

Propiedad CSS grid-template-rows ​

Sintaxis ​

Ejemplo de la propiedad grid-template-rows: ​

Resultado ​

Ejemplo de la propiedad grid-template-rows con el tamaño especificado de las filas: ​

Valores ​