Propiedad CSS grid-auto-rows

La propiedad grid-auto-rows especifica el tamaño de las filas en un contenedor grid. Solo tiene efecto en las filas sin tamaño especificado.

Esta propiedad tiene los siguientes valores: auto, max-content, min-content, minmax, length y percentages.

Initial Value	auto
Applies to	Grid containers.
Inherited	No.
Animatable	Yes. Size of the rows is animatable.
Version	CSS Grid Layout Module Level 1
DOM Syntax	object.style.gridAutoRows = "40px";

Sintaxis

Sintaxis de la propiedad CSS grid-auto-rows

css

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 length

html

<!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>

Try it Yourself »

Resultado

CSS grid-auto-rows Property

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

Ejemplo de la propiedad CSS grid-auto-rows con valores auto, length, min-content, percentage y min-content

html

<!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>

Try it Yourself »

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

>Ejemplo de la propiedad grid-auto-rows con los valores "minmax":

html

<!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>

Try it Yourself »

Aquí, grid-auto-rows se usa para establecer un tamaño predeterminado (altura) para todas las filas.

Valores

Value	Description	Play it
auto	El tamaño de cada fila lo determina su contenido. Este es el valor predeterminado de la propiedad.	Play it »
max-content	El tamaño de cada fila depende del elemento más grande de la fila.	Play it »
min-content	El tamaño de cada fila depende del elemento más pequeño de la fila.	Play it »
minmax(min, max)	El rango de tamaño es mayor o igual que "min" y menor o igual que "max".	Play it »
`<length>`	El tamaño de las filas se especifica mediante un valor de longitud.	Play it »
`<percentage>`	El tamaño de las filas se especifica mediante porcentajes.	Play it »
`<flex>`	Una dimensión no negativa con la unidad "fr" que especifica el factor flex de la pista. Cada pista de tamaño `<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.

Práctica

What is the function of the 'grid-auto-rows' property in CSS grid layout?

It specifies the size of any auto-generated grid rows.It defines the color of the grid rows.It adjusts the location of grid rows on the screen.It influences the automatic placement algorithm in relation to only grid rows.

Propiedad CSS grid-auto-rows ​

Sintaxis ​

Ejemplo de la propiedad grid-auto-rows: ​

Resultado ​

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

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

Valores ​

Práctica ​

Propiedad CSS grid-auto-rows

Sintaxis

Ejemplo de la propiedad grid-auto-rows:

Resultado

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

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

Valores

Práctica