Propriedade CSS grid-row-end

A propriedade CSS grid-row-end define onde um item de grade termina ao longo do eixo de bloco (linha). Você pode informar um número de linha de linha para parar, um span indicando quantas linhas o item deve cobrir, ou auto para deixar o navegador posicioná-lo automaticamente. Junto com grid-row-start, ela define as bordas de início e fim de bloco da área de grade do item.

Como as linhas de grade de linha são numeradas

Uma grade é delimitada por linhas numeradas, não pelas faixas (linhas) em si. Uma grade com três linhas possui quatro linhas horizontais: a linha 1 percorre a borda superior, e a linha 4, a borda inferior.

line:  1 ─────────────────────
         |  row 1             |
line:  2 ─────────────────────
         |  row 2             |
line:  3 ─────────────────────
         |  row 3             |
line:  4 ─────────────────────

grid-row-end faz referência a uma dessas linhas:

grid-row-end: 3 faz o item terminar na linha 3 — ele ocupa as linhas 1 e 2 se começar na linha 1.
grid-row-end: span 2 faz o item terminar 2 linhas após onde ele começa, independentemente do número absoluto da linha.

Você também pode contar a partir do final com números negativos: -1 é a última linha (a borda inferior), -2 é a linha acima dela. Assim, grid-row-end: -1 sempre alcança a parte inferior da grade explícita, independentemente de quantas linhas ela possua — útil para itens de "altura total".

Dica: o valor descreve apenas onde o item para. Onde ele começa vem de grid-row-start (ou do posicionamento automático). O atalho grid-row define ambos de uma vez — por exemplo, grid-row: 1 / 3 posiciona o item da linha 1 à linha 3, abrangendo duas linhas.

Valor Inicial	auto
Aplica-se a	Itens de grade.
Herdado	Não.
Animável	Sim.
Versão	CSS Grid Layout Module Level 1
Sintaxe DOM	`object.style.gridRowEnd = "4";`

Sintaxe

grid-row-end: auto | <integer> | span <integer> | inherit | initial | unset;

Exemplo: valor de número de linha

O valor padrão auto faz um item ocupar uma única linha. Definir grid-row-end: 3 em um item que começa na linha 1 (o padrão) faz com que ele abranja as duas primeiras linhas — a borda inferior do item fica na linha 3.

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

Experimente Você Mesmo »

Resultado

![CSS grid-row-end com vários itens](/uploads/media/default/0001/04/260b91923438edb01b18d93650fd3050e244dd52.png "CSS grid-row-end example" =420x)

O item 1 termina na linha de grade 3, portanto ele se estende pelas duas primeiras linhas enquanto os demais itens fluem ao redor dele. No próximo exemplo, o mesmo efeito é obtido com a palavra-chave span em vez de um número de linha fixo.

Exemplo: valor span

Usar span é útil quando você se preocupa com quantas linhas um item cobre, em vez da linha exata em que termina. grid-row-end: span 3 significa que o item se estende três linhas para baixo a partir de onde começa.

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

Experimente Você Mesmo »

Com grid-row-end: span 3, o item 2 mantém sua linha de início automática e se estende três linhas para baixo, independentemente de qual linha absoluta isso corresponda.

Valores

Valor	Descrição
`auto`	O item ocupa uma única linha (posicionamento automático). Este é o valor padrão.
`span n`	O item termina `n` linhas após sua linha de início.
`<integer>`	Um número de linha positivo ou negativo onde o item deve terminar. Inteiros negativos contam a partir do final da grade (`-1` = última linha).
`initial`	Define a propriedade com seu valor padrão (`auto`).
`inherit`	Herda o valor do elemento pai.
`unset`	Remove o valor atual, revertendo para o herdado ou inicial.

Erros comuns

span é relativo; números de linha são absolutos. grid-row-end: 3 sempre para na linha 3; grid-row-end: span 3 para três linhas após a linha de início. Confundir os dois é o erro de posicionamento de grade mais comum.
Fim antes do início? O navegador os troca. Se grid-row-end resultar em uma linha antes de grid-row-start, o navegador troca os dois valores automaticamente para que a área permaneça válida.
Definir apenas grid-row-end não move o início. A linha de início ainda é posicionada automaticamente. Para fixar ambas as bordas, use o atalho grid-row (grid-row: 1 / 3) ou também defina grid-row-start.
Valores negativos só alcançam a grade explícita. -1 aponta para a linha final da grade definida por grid-template-rows; ele não se estende para linhas criadas implicitamente.
width/height explícito geralmente é desnecessário. O layout de grade dimensiona os itens automaticamente dentro de suas células atribuídas.

Propriedades relacionadas

grid-row-start — a linha onde o item começa no eixo de linha.
grid-row — atalho que define as linhas de início e fim de linha de uma vez.
grid-column-end — o equivalente desta propriedade no eixo de coluna.
grid-template-rows — define as faixas de linha e as linhas entre elas.
grid-area — define as quatro linhas de posicionamento (row-start, column-start, row-end, column-end) em uma única declaração.
grid-auto-rows — controla o tamanho das faixas de linha criadas implicitamente quando os itens ultrapassam a grade explícita.

Prática

O que a propriedade CSS 'grid-row-end' faz?

Define a linha onde o lado final de um item de grade termina horizontalmente na grade.Define a linha onde o lado final de um item de grade termina verticalmente na grade.Alinha os itens dentro da grade verticalmente.Controla o espaço entre duas linhas na grade.