Propiedad CSS grid-auto-rows

La propiedad grid-auto-rows establece el tamaño (alto) de las filas implícitas de la cuadrícula — filas que el navegador crea automáticamente cuando los elementos se colocan fuera de las filas que definiste con grid-template-rows. No tiene efecto sobre las filas explícitas que ya tienen un tamaño asignado.

Esta página explica qué es una fila implícita, la lista completa de valores que acepta grid-auto-rows, y ejemplos ejecutables para cada uno.

Filas implícitas vs. explícitas

Una cuadrícula tiene dos tipos de pistas:

Filas explícitas — las que declaras con grid-template-rows. Su tamaño queda fijado por esa declaración.
Filas implícitas — filas adicionales que la cuadrícula genera bajo demanda. Aparecen cuando hay más elementos (o elementos posicionados más abajo) de los que las filas explícitas pueden contener.

grid-template-rows dimensiona las filas explícitas; grid-auto-rows dimensiona las implícitas. Esa es la razón clave para usar esta propiedad: tienes un número desconocido o creciente de filas (un feed, una galería, una lista) y quieres que cada fila creada automáticamente comparta una altura consistente en lugar de recurrir a auto.

La dirección en la que se añaden nuevas filas está controlada por grid-auto-flow; la contraparte para columnas de esta propiedad es grid-auto-columns.

Esta propiedad acepta los siguientes valores: auto, max-content, min-content, minmax(), un valor <length>, un <percentage>, y un valor flex (fr).

Valor inicial	auto
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.gridAutoRows = "40px";

Sintaxis

Sintaxis de la propiedad CSS grid-auto-rows

grid-auto-rows: auto | max-content | min-content | <length> | <percentage> | <flex> | initial | inherit;

Ejemplo de la propiedad grid-auto-rows:

Ejemplo de la propiedad CSS grid-auto-rows con valores auto y de longitud

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box1 {
        grid-area: 1 / 1 / 2 / 2;
      }
      .box2 {
        grid-area: 1 / 2 / 2 / 3;
      }
      .box3 {
        grid-area: 1 / 3 / 2 / 4;
      }
      .box4 {
        grid-area: 2 / 1 / 3 / 2;
      }
      .box5 {
        grid-area: 2 / 2 / 3 / 3;
      }
      .box6 {
        grid-area: 2 / 3 / 3 / 4;
      }
      .auto-box1 {
        grid-area: 1 / 1 / 2 / 2;
      }
      .auto-box2 {
        grid-area: 1 / 2 / 2 / 3;
      }
      .auto-box3 {
        grid-area: 1 / 3 / 2 / 4;
      }
      .auto-box4 {
        grid-area: 2 / 1 / 3 / 2;
      }
      .auto-box5 {
        grid-area: 2 / 2 / 3 / 3;
      }
      .auto-box6 {
        grid-area: 2 / 3 / 3 / 4;
      }
      .grid-container {
        display: grid;
        grid-auto-rows: 100px;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #666;
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
      .auto-container {
        display: grid;
        grid-auto-rows: auto;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .auto-container > div {
        background-color: #666;
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-auto-rows property example</h2>
    <h3>100 pixels</h3>
    <div class="grid-container">
      <div class="box1">1</div>
      <div class="box2">2</div>
      <div class="box3">3</div>
      <div class="box4">4</div>
      <div class="box5">5</div>
      <div class="box6">6</div>
    </div>
    <h3>auto</h3>
    <div class="auto-container">
      <div class="auto-box1">1</div>
      <div class="auto-box2">2</div>
      <div class="auto-box3">3</div>
      <div class="auto-box4">4</div>
      <div class="auto-box5">5</div>
      <div class="auto-box6">6</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Ejemplo de la propiedad grid-auto-rows con varios valores

Ejemplo de la propiedad CSS grid-auto-rows con valores de longitud, porcentaje, auto, min-content y max-content

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box1 {
        grid-area: 1 / 1 / 2 / 2;
      }
      .box2 {
        grid-area: 1 / 2 / 2 / 3;
      }
      .box3 {
        grid-area: 1 / 3 / 2 / 4;
      }
      .box4 {
        grid-area: 2 / 1 / 3 / 2;
      }
      .box5 {
        grid-area: 2 / 2 / 3 / 3;
      }
      .box6 {
        grid-area: 2 / 3 / 3 / 4;
      }
      .grey-box1 {
        grid-area: 1 / 1 / 2 / 2;
      }
      .grey-box2 {
        grid-area: 1 / 2 / 2 / 3;
      }
      .grey-box3 {
        grid-area: 1 / 3 / 2 / 4;
      }
      .grey-box4 {
        grid-area: 2 / 1 / 3 / 2;
      }
      .grey-box5 {
        grid-area: 2 / 2 / 3 / 3;
      }
      .grey-box6 {
        grid-area: 2 / 3 / 3 / 4;
      }
      .auto-box1 {
        grid-area: 1 / 1 / 2 / 2;
      }
      .auto-box2 {
        grid-area: 1 / 2 / 2 / 3;
      }
      .auto-box3 {
        grid-area: 1 / 3 / 2 / 4;
      }
      .auto-box4 {
        grid-area: 2 / 1 / 3 / 2;
      }
      .auto-box5 {
        grid-area: 2 / 2 / 3 / 3;
      }
      .auto-box6 {
        grid-area: 2 / 3 / 3 / 4;
      }
      .min-box1 {
        grid-area: 1 / 1 / 2 / 2;
      }
      .min-box2 {
        grid-area: 1 / 2 / 2 / 3;
      }
      .min-box3 {
        grid-area: 1 / 3 / 2 / 4;
      }
      .min-box4 {
        grid-area: 2 / 1 / 3 / 2;
      }
      .min-box5 {
        grid-area: 2 / 2 / 3 / 3;
      }
      .min-box6 {
        grid-area: 2 / 3 / 3 / 4;
      }
      .max-box1 {
        grid-area: 1 / 1 / 2 / 2;
      }
      .max-box2 {
        grid-area: 1 / 2 / 2 / 3;
      }
      .max-box3 {
        grid-area: 1 / 3 / 2 / 4;
      }
      .max-box4 {
        grid-area: 2 / 1 / 3 / 2;
      }
      .max-box5 {
        grid-area: 2 / 2 / 3 / 3;
      }
      .max-box6 {
        grid-area: 2 / 3 / 3 / 4;
      }
      .grid-container {
        display: grid;
        grid-auto-rows: 150px;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #888;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .grey-container {
        display: grid;
        grid-auto-rows: 30%;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grey-container > div {
        background-color: #888;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .auto-container {
        display: grid;
        grid-auto-rows: auto;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .auto-container > div {
        background-color: #888;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .min-container {
        display: grid;
        grid-auto-rows: min-content;
        gap: 10px;
        background-color: #000;
        padding: 10px;
      }
      .min-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .max-container {
        display: grid;
        grid-auto-rows: max-content;
        gap: 10px;
        background-color: #000;
        padding: 10px;
      }
      .max-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-auto-rows property example</h2>
    <p>Use the <strong>grid-auto-rows</strong> property to set a default size (height) for all rows.</p>
    <h3>150 pixels</h3>
    <div class="grid-container">
      <div class="box1">1</div>
      <div class="box2">2</div>
      <div class="box3">3</div>
      <div class="box4">4</div>
      <div class="box5">5</div>
      <div class="box6">6</div>
    </div>
    <h3>30%</h3>
    <div class="grey-container">
      <div class="grey-box1">1</div>
      <div class="grey-box2">2</div>
      <div class="grey-box3">3</div>
      <div class="grey-box4">4</div>
      <div class="grey-box5">5</div>
      <div class="grey-box6">6</div>
    </div>
    <h3>auto</h3>
    <div class="auto-container">
      <div class="auto-box1">1</div>
      <div class="auto-box2">2</div>
      <div class="auto-box3">3</div>
      <div class="auto-box4">4</div>
      <div class="auto-box5">5</div>
      <div class="auto-box6">6</div>
    </div>
    <h3>min-content</h3>
    <div class="min-container">
      <div class="min-box1">1</div>
      <div class="min-box2">2</div>
      <div class="min-box3">3</div>
      <div class="min-box4">4</div>
      <div class="min-box5">5</div>
      <div class="min-box6">6</div>
    </div>
    <h3>max-content</h3>
    <div class="max-container">
      <div class="max-box1">1</div>
      <div class="max-box2">2</div>
      <div class="max-box3">3</div>
      <div class="max-box4">4</div>
      <div class="max-box5">5</div>
      <div class="max-box6">6</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de la propiedad grid-auto-rows con el valor "minmax"

Ejemplo de la propiedad grid-auto-rows con un valor minmax()

La función minmax(min, max) otorga a cada fila implícita una altura flexible: nunca se reduce por debajo de min ni crece más allá de max. Aquí cada fila automática tiene al menos 90px de alto pero no más de 4cm.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box1 {
        grid-area: 1 / 1 / 2 / 2;
      }
      .box2 {
        grid-area: 1 / 2 / 2 / 3;
      }
      .box3 {
        grid-area: 1 / 3 / 2 / 4;
      }
      .box4 {
        grid-area: 2 / 1 / 3 / 2;
      }
      .box5 {
        grid-area: 2 / 2 / 3 / 3;
      }
      .box6 {
        grid-area: 2 / 3 / 3 / 4;
      }
      .minmax1 {
        grid-area: 1 / 1 / 2 / 2;
      }
      .minmax2 {
        grid-area: 1 / 2 / 2 / 3;
      }
      .minmax3 {
        grid-area: 1 / 3 / 2 / 4;
      }
      .minmax4 {
        grid-area: 2 / 1 / 3 / 2;
      }
      .minmax5 {
        grid-area: 2 / 2 / 3 / 3;
      }
      .minmax6 {
        grid-area: 2 / 3 / 3 / 4;
      }
      .grid-container {
        display: grid;
        grid-auto-rows: 100px;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #666;
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
      .minmax-container {
        display: grid;
        grid-auto-rows: minmax(90px, 4cm);
        gap: 10px;
        background-color: #cccccc;
        padding: 10px;
      }
      .minmax-container > div {
        background-color: #f5f5f5;
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-auto-rows property example</h2>
    <h3>100 pixels</h3>
    <div class="grid-container">
      <div class="box1">1</div>
      <div class="box2">2</div>
      <div class="box3">3</div>
      <div class="box4">4</div>
      <div class="box5">5</div>
      <div class="box6">6</div>
    </div>
    <h3>minmax</h3>
    <div class="minmax-container">
      <div class="minmax1">1</div>
      <div class="minmax2">2</div>
      <div class="minmax3">3</div>
      <div class="minmax4">4</div>
      <div class="minmax5">5</div>
      <div class="minmax6">6</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Aquí, grid-auto-rows establece una altura predeterminada para cada fila implícita, mientras que minmax() mantiene esa altura flexible entre un límite inferior y uno superior.

Valores

Valor	Descripción	Pruébalo
auto	El tamaño de cada fila está determinado por su contenido. Este es el valor predeterminado de la propiedad.	Pruébalo »
max-content	El tamaño de cada fila depende del elemento más grande de la fila.	Pruébalo »
min-content	El tamaño de cada fila depende del elemento más pequeño de la fila.	Pruébalo »
minmax(min, max)	El rango de tamaño es mayor o igual a "min" y menor o igual a "max".	Pruébalo »
`<length>`	El tamaño de las filas se especifica mediante un valor de longitud.	Pruébalo »
`<percentage>`	El tamaño de las filas se especifica mediante porcentajes.	Pruébalo »
`<flex>`	Una dimensión no negativa con la unidad "fr" que especifica el factor flex de la pista. Cada pista dimensionada con `<flex>` comparte el espacio restante en proporción a su factor flex.
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Propiedades relacionadas

grid-template-rows — dimensiona las filas explícitas; grid-auto-rows solo dimensiona las filas creadas más allá de ellas.
grid-auto-columns — el equivalente para columnas: dimensiona las columnas implícitas.
grid-auto-flow — controla si la cuadrícula coloca automáticamente los elementos en nuevas filas o nuevas columnas.
grid — la abreviatura que puede establecer todos estos valores a la vez.

Práctica

¿Cuál es la función de la propiedad 'grid-auto-rows' en el diseño de cuadrículas CSS?

Especifica el tamaño de las filas de cuadrícula generadas automáticamente.Define el color de las filas de la cuadrícula.Ajusta la ubicación de las filas de la cuadrícula en la pantalla.Influye en el algoritmo de colocación automática en relación con solo las filas de la cuadrícula.