Propriedade CSS grid-row-start

A propriedade CSS grid-row-start define em qual linha de linha de grade um item de grade começa. Em outras palavras, ela especifica a linha de início do bloco (a borda superior em um layout horizontal da esquerda para a direita) da área de grade do item. Você pode fornecer um número de linha, um nome de linha ou a palavra-chave span, que faz o item se estender por várias linhas.

Esta propriedade só tem efeito em itens de grade — filhos diretos de um elemento cujo display é grid ou inline-grid. Em qualquer outro elemento, ela é ignorada. É a forma abreviada do lado inicial do atalho grid-row, e combina com grid-row-end para definir o intervalo vertical completo. Para posicionamento horizontal, veja a propriedade equivalente grid-column-start.

Esta página aborda a sintaxe de grid-row-start, cada valor aceito, exemplos práticos (números de linha e span) e os problemas comuns a serem observados.

Valor Inicial	auto
Aplica-se a	Itens de grade.
Herdada	Não.
Animável	Sim. O posicionamento dos itens é animável.
Versão	CSS Grid Layout Module Level 1
Sintaxe DOM	object.style.gridRowStart = "5";

Sintaxe

Sintaxe CSS grid-row-start

grid-row-start: auto | <line> | span <number> | initial | inherit;

Nota: <line> é um marcador para um número de linha ou um nome de linha personalizado.

Exemplo da propriedade grid-row-start:

Exemplo de código CSS grid-row-start

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 20px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
      .box {
        grid-row-start: auto;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row-start property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div class="box">3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Com grid-row-start: auto, o box 3 simplesmente ocupa sua posição natural no fluxo da grade — auto deixa o algoritmo de posicionamento automático da grade decidir onde o item vai.

Exemplo da propriedade grid-row-start, onde o terceiro box começa a partir da primeira linha:

Exemplo CSS grid-row-start na primeira linha

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 20px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
      .box {
        grid-row-start: 1;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row-start property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div class="box">3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Definir grid-row-start: 1 fixa o box 3 na linha de grade 1, fazendo-o começar na linha superior independentemente de sua ordem no código-fonte.

Exemplo da propriedade grid-row-start, onde o quarto box começa a partir da segunda linha:

Exemplo CSS grid-row-start na segunda linha

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 20px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
      .box {
        grid-row-start: 2;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row-start property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div class="box">4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Exemplo da propriedade grid-row-start com a palavra-chave `span`:

Exemplo CSS grid-row-start com span

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 20px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
      .box {
        grid-row-start: span 2;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row-start property example with span</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div class="box">3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Com span 2, o box 3 se estende por duas linhas a partir de sua linha de início natural, empurrando os itens seguintes para as próximas células disponíveis. Use span quando você se preocupa com quantas linhas um item deve ocupar, e não com qual linha exata ele deve começar.

Exemplo dos valores `initial` e `inherit`:

Exemplo CSS grid-row-start com initial/inherit

.box-initial {
  grid-row-start: initial; /* Resets to the default 'auto' behavior */
}
.box-inherit {
  grid-row-start: inherit; /* Inherits the value from the parent grid item */
}

Nota: initial é normalmente usado para redefinir a propriedade ao seu comportamento padrão, enquanto inherit é útil quando um item de grade filho precisa corresponder ao comportamento de posicionamento do seu pai.

Valores

Valor	Descrição	Experimente
auto	Ocupa uma linha. O posicionamento exato depende das regras de posicionamento automático da grade. Este é o valor padrão desta propriedade.	Experimente »
`<line>`	Especifica um número ou nome de linha onde o item deve começar.	Experimente »
initial	Faz a propriedade usar seu valor padrão.
inherit	Herda a propriedade do elemento pai.

Nota: Quando combinado com grid-row-end, certifique-se de que a linha de início está antes da linha de fim para evitar sobreposição ou colapso de itens da grade.

Dicas e problemas comuns

Números de linha negativos contam a partir do fim. grid-row-start: -1 refere-se à última linha da grade, o que é útil para ancorar um item na parte inferior de uma grade de tamanho explícito.
auto não é o mesmo que 1. auto delega o posicionamento ao algoritmo de posicionamento automático da grade, enquanto 1 sempre fixa o item na primeira linha da grade.
Itens posicionados explicitamente podem deixar lacunas. Fixar um item em uma linha específica pode mover outros itens e criar células vazias, dependendo de grid-auto-flow.
Defina a linha de fim correspondente para maior clareza. Quando você controla o início com grid-row-start, também definir grid-row-end (ou usar o atalho grid-row) torna o intervalo do item explícito e mais fácil de manter.

Suporte a navegadores

grid-row-start faz parte do CSS Grid Layout e é suportado em todos os navegadores modernos — Chrome, Firefox, Safari e Edge.

Propriedades relacionadas

grid-row — atalho para grid-row-start e grid-row-end.
grid-row-end — define a linha final (block-end) do item.
grid-column-start — o equivalente horizontal desta propriedade.
grid-template-rows — define as linhas (e os nomes de linhas) que grid-row-start referencia.

Prática

O que a propriedade grid-row-start em CSS especifica?

Especifica o número da linha onde um item de grade deve começarEspecifica o número da linha onde uma grade deve começarMarca o início de uma grade CSSEspecifica a cor da linha inicial em uma gradeEspecifica o nome da linha da grade onde o item vai começar

Sintaxe

Exemplo da propriedade grid-row-start:

Resultado

Exemplo da propriedade grid-row-start, onde o terceiro box começa a partir da primeira linha:

Exemplo da propriedade grid-row-start, onde o quarto box começa a partir da segunda linha:

Exemplo da propriedade grid-row-start com a palavra-chave span:

Exemplo dos valores initial e inherit:

Valores

Dicas e problemas comuns

Suporte a navegadores

Propriedades relacionadas

Prática

Exemplo da propriedade grid-row-start com a palavra-chave `span`:

Exemplo dos valores `initial` e `inherit`: