Propriedade CSS grid-template-rows

A propriedade grid-template-rows define quantas linhas um CSS grid possui e qual a altura de cada uma. Você lista os tamanhos das faixas um após o outro, separados por espaços, e o CSS cria uma linha explícita por valor. Assim, grid-template-rows: 100px 200px cria duas linhas — a primeira com 100 px de altura e a segunda com 200 px.

Esta propriedade afeta apenas contêineres de grid (elementos com display: grid ou display: inline-grid). É a contraparte na direção das linhas de grid-template-columns, e os dois são frequentemente escritos juntos para definir um grid completo.

O tamanho de uma faixa pode ser um comprimento fixo, uma porcentagem, uma unidade flexível fr, uma palavra-chave baseada em conteúdo, ou uma função como repeat() e minmax(). Combiná-los é o que torna os layouts de grid flexíveis:

Use um comprimento (px, rem) quando quiser que uma linha mantenha uma altura exata.
Use fr quando quiser que as linhas compartilhem o espaço restante proporcionalmente.
Use auto ou min-content / max-content quando a linha deve crescer para se ajustar ao seu conteúdo.
Use repeat() para evitar digitar o mesmo tamanho várias vezes.
Use minmax() quando uma linha precisa de um mínimo e um máximo (por exemplo, "pelo menos 100px, mas cresce se necessário").

Informação

As linhas criadas aqui formam o grid explícito. Se os itens transbordarem para linhas não definidas, essas linhas extras são dimensionadas por grid-auto-rows.

Valor Inicial	none
Aplica-se a	Contêineres de grid.
Herdado	Não.
Animável	Sim. O tamanho das linhas é animável.
Versão	CSS Grid Layout Module Level 1
Sintaxe DOM	`object.style.gridTemplateRows = "20px 100px"`

Sintaxe

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];

As palavras-chave padrão initial e inherit também se aplicam, como em qualquer propriedade CSS.

Uso básico

Linhas dimensionadas automaticamente

Com auto, cada linha cresce para se ajustar à célula mais alta. Este é o ponto de partida mais comum.

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

Experimente Você Mesmo »

Com grid-template-rows: auto auto, ambas as linhas crescem para se ajustar ao seu conteúdo, portanto cada célula tem a mesma altura que o seu irmão mais alto naquela linha.

Linhas com altura fixa

Passe valores em pixels para fixar as linhas em uma altura exata, independente do conteúdo.

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

Experimente Você Mesmo »

Aqui as linhas são fixas: a primeira tem sempre 100 px de altura e a segunda sempre 300 px, independente de quanto conteúdo as células contenham. O conteúdo que ultrapassa essas alturas é cortado ou rola dependendo da configuração de overflow.

Unidades fr, repeat() e minmax()

A unidade fr

fr ("fração") representa uma parte do espaço livre restante no grid após a colocação das faixas de tamanho fixo. O espaço livre é o tamanho total do grid menos o espaço ocupado pelas faixas com tamanhos absolutos ou baseados em conteúdo.

/* 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;

A unidade fr é útil quando o grid tem uma altura conhecida (definida no contêiner) e você quer que as faixas o preencham sem precisar fazer cálculos.

repeat()

repeat(count, track-list) é uma abreviação para repetir um ou mais tamanhos de faixa.

/* 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) fornece a uma faixa um tamanho mínimo e máximo. O navegador resolve o tamanho real dentro desse intervalo dependendo do conteúdo e do espaço disponível.

/* 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 os três

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

O grid tem 600 px de altura. repeat(2, 1fr) cria duas linhas que compartilham igualmente a altura disponível. A terceira linha usa minmax(80px, auto): tem pelo menos 80 px de altura, mas se expande se o seu conteúdo crescer além disso.

Faixas com linhas nomeadas

Você pode dar nomes às linhas entre as rows envolvendo o nome em colchetes. Linhas nomeadas facilitam muito o posicionamento de itens com grid-row sem precisar contar as linhas do grid.

.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;
}

Uma linha pode ter vários nomes separados por espaços dentro dos mesmos colchetes — [header-end body-start] significa que a mesma linha é o fim do cabeçalho e o início do corpo.

Palavras-chave baseadas em conteúdo

auto

auto significa que a faixa é dimensionada pelo seu conteúdo (equivalente a minmax(auto, auto)). A linha cresce até o item mais alto que contém, mas não diminui abaixo do tamanho mínimo do conteúdo. Quando faixas fr também estão presentes na mesma declaração, as faixas auto são resolvidas primeiro e as faixas fr compartilham o espaço restante.

min-content

A linha tem exatamente a altura suficiente para caber o conteúdo menor em qualquer uma de suas células — na prática, tão alta quanto a palavra mais longa ou a menor imagem.

max-content

A linha tem altura suficiente para caber o conteúdo maior sem quebrar. Equivalente a dar a cada célula tanto espaço vertical quanto ela queira.

fit-content(`<value>`)

fit-content(200px) se comporta como auto (cresce com o conteúdo), mas é limitado pelo argumento fornecido. Equivalente a min(max-content, max(auto, 200px)). Útil quando você quer que uma linha seja dimensionada pelo conteúdo, mas nunca cresça além de um limite.

subgrid

Quando um item do grid é ele próprio um contêiner de grid, subgrid em grid-template-rows instrui esse grid interno a usar as faixas de linha do grid pai em vez de criar as suas próprias. Isso permite alinhar o conteúdo dentro de itens de grid aninhados com o ritmo do grid externo.

.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 tem suporte amplo desde o final de 2023 (Chrome 117+, Firefox 71+, Safari 16+).

auto-fill e auto-fit em repeat()

auto-fill e auto-fit são usados dentro de repeat() para criar tantas faixas quantas caibam no contêiner. São mais comumente vistos com grid-template-columns, mas funcionam de forma idêntica com linhas quando o contêiner tem uma altura fixa.

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

auto-fill — preenche o grid com o máximo de faixas possível, mesmo que algumas fiquem vazias.
auto-fit — igual a auto-fill, mas colapsa as faixas vazias para tamanho zero, fazendo os itens se expandirem para preencher o espaço disponível.

Valores

Valor	Descrição
`none`	Padrão. Nenhuma linha explícita é definida; todas as linhas são implícitas.
`auto`	A altura da linha é determinada pelo seu conteúdo ou espaço disponível.
`max-content`	A linha tem a altura do maior tamanho intrínseco entre seus itens.
`min-content`	A linha tem a altura do menor tamanho intrínseco entre seus itens.
`minmax(min, max)`	O tamanho da faixa está dentro do intervalo dado. `min` não pode ser `fr`; `max` pode.
`<length>`	Uma altura fixa como `100px` ou `2rem`.
`<percentage>`	Uma altura relativa à altura do contêiner do grid (deve ser definida).
`<flex>` (`fr`)	Uma dimensão não negativa que toma uma parte do espaço livre restante.
`fit-content(<value>)`	Dimensionada pelo conteúdo, mas limitada ao argumento fornecido.
`repeat(count, tracks)`	Repete um padrão de tamanhos de faixa. `count` pode ser um número, `auto-fill` ou `auto-fit`.
`subgrid`	A lista de faixas é herdada do grid pai.
`initial`	Redefine a propriedade para o seu padrão (`none`).
`inherit`	Herda o valor do elemento pai.

Problemas comuns

fr requer uma altura definida no contêiner. Se o contêiner do grid não tiver uma height explícita, não há espaço livre para as linhas fr compartilharem — elas colapsam para dimensionamento auto. Sempre defina uma height (ou min-height) no contêiner ao usar fr em linhas.
Porcentagens requerem uma altura definida no contêiner pelo mesmo motivo. Se a altura do contêiner for intrínseca, os tamanhos de linha em porcentagem também são resolvidos como auto.
Somente linhas explícitas. Esta propriedade dimensiona as linhas que você declara. Linhas extras geradas por itens que transbordam são dimensionadas por grid-auto-rows — essas linhas implícitas têm padrão auto se grid-auto-rows não estiver definido.
minmax(0, 1fr) vs 1fr. A unidade fr tem um mínimo implícito de auto, portanto as linhas 1fr não podem encolher abaixo do tamanho do seu conteúdo. Use minmax(0, 1fr) quando quiser explicitamente que as linhas encolham abaixo do conteúdo — por exemplo, dentro de contêineres de rolagem.

Prática

O que a propriedade grid-template-rows em CSS faz?

Define o número de linhas em um layout de grid.Especifica o tamanho das linhas em um layout de grid.Cria o layout de grid em CSS.Controla a quantidade de espaço entre cada linha em um layout de grid.Define a ordem das camadas em um layout de grid.

Propriedades relacionadas

grid-template-columns — a contraparte na direção das colunas desta propriedade.
grid-auto-rows — dimensiona linhas criadas implicitamente, fora do grid explícito.
grid-template-areas — nomeia áreas do grid para posicionar itens por referência.
grid-template — abreviação para linhas, colunas e áreas em uma única declaração.
grid-row — abreviação para posicionar ou expandir um item de grid por faixas de linha.
grid-auto-flow — controla a direção e o algoritmo de empacotamento para itens posicionados automaticamente.
grid — a abreviação completa do grid e um ponto de partida para o layout de grid.