Propriedade CSS grid-auto-rows

A propriedade grid-auto-rows define o tamanho (altura) das linhas implícitas do grid — linhas que o navegador cria automaticamente quando itens são posicionados além das linhas definidas com grid-template-rows. Ela não tem efeito sobre linhas explícitas que já possuem um tamanho definido.

Esta página explica o que é uma linha implícita, a lista completa de valores que grid-auto-rows aceita e exemplos executáveis para cada um.

Linhas implícitas vs. explícitas

Um grid tem dois tipos de trilhas:

Linhas explícitas — as que você declara com grid-template-rows. Seu tamanho é fixado por essa declaração.
Linhas implícitas — linhas extras que o grid gera sob demanda. Elas aparecem quando há mais itens (ou itens posicionados mais abaixo) do que as linhas explícitas conseguem comportar.

grid-template-rows dimensiona as linhas explícitas; grid-auto-rows dimensiona as implícitas. Esse é o principal motivo para usar esta propriedade: quando você tem um número desconhecido ou crescente de linhas (um feed, uma galeria, uma lista) e quer que cada linha criada automaticamente tenha uma altura consistente em vez de recorrer ao valor auto.

A direção em que novas linhas são adicionadas é controlada por grid-auto-flow; a propriedade equivalente para colunas é grid-auto-columns.

Esta propriedade aceita os seguintes valores: auto, max-content, min-content, minmax(), um valor <length>, um <percentage> e um valor flex (fr).

Valor Inicial	auto
Aplica-se a	Contêineres de grid.
Herdável	Não.
Animável	Sim. O tamanho das linhas é animável.
Versão	CSS Grid Layout Module Level 1
Sintaxe DOM	object.style.gridAutoRows = "40px";

Sintaxe

Sintaxe da propriedade CSS grid-auto-rows

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

Exemplo da propriedade grid-auto-rows:

Exemplo da propriedade CSS grid-auto-rows com os valores auto e length

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

Experimente Você Mesmo »

Resultado

Exemplo da propriedade grid-auto-rows com vários valores

Exemplo da propriedade CSS grid-auto-rows com valores length, percentage, auto, min-content e 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>

Experimente Você Mesmo »

Exemplo da propriedade grid-auto-rows com o valor "minmax"

Exemplo da propriedade grid-auto-rows com um valor minmax()

A função minmax(min, max) dá a cada linha implícita uma altura flexível: ela nunca encolhe abaixo de min e nunca cresce além de max. Neste exemplo, cada linha automática tem pelo menos 90px de altura, mas não mais do que 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>

Experimente Você Mesmo »

Aqui, grid-auto-rows define uma altura padrão para cada linha implícita, enquanto minmax() mantém essa altura flexível entre um limite inferior e um limite superior.

Valores

Valor	Descrição	Experimente
auto	O tamanho de cada linha é determinado pelo seu conteúdo. Este é o valor padrão da propriedade.	Experimente »
max-content	O tamanho de cada linha depende do maior item na linha.	Experimente »
min-content	O tamanho de cada linha depende do menor item na linha.	Experimente »
minmax(min, max)	O intervalo de tamanho é maior ou igual a "min" e menor ou igual a "max".	Experimente »
`<length>`	O tamanho das linhas é especificado por um valor de comprimento.	Experimente »
`<percentage>`	O tamanho das linhas é especificado em porcentagens.	Experimente »
`<flex>`	Uma dimensão não negativa com a unidade "fr" que especifica o fator flex da trilha. Cada trilha dimensionada com `<flex>` compartilha o espaço restante proporcionalmente ao seu fator flex.
initial	Faz a propriedade usar seu valor padrão.
inherit	Herda a propriedade do seu elemento pai.

Propriedades relacionadas

grid-template-rows — dimensiona as linhas explícitas; grid-auto-rows dimensiona apenas as linhas criadas além delas.
grid-auto-columns — o equivalente para colunas: dimensiona colunas implícitas.
grid-auto-flow — controla se o grid posiciona automaticamente os itens em novas linhas ou novas colunas.
grid — o atalho que pode definir todas essas propriedades de uma só vez.

Prática

Qual é a função da propriedade 'grid-auto-rows' no layout CSS grid?

Ela especifica o tamanho de qualquer linha de grid gerada automaticamente.Ela define a cor das linhas do grid.Ela ajusta a localização das linhas do grid na tela.Ela influencia o algoritmo de posicionamento automático em relação apenas às linhas do grid.