Atributo CSS grid-row

Definição e uso

A propriedade grid-row define o tamanho do item da grade e sua posição no layout da grade, é uma abreviação das seguintes propriedades:

Veja também:

Tutorial CSS:Layout de grade CSS

Exemplo

Exemplo 1

Faz com que "item1" comece na linha 1 e estenda por duas linhas:

.item1 {
  grid-row: 1 / span 2;
}

Experimente você mesmo

Exemplo 2

Você pode usar o valor da linha de linha em vez do número de linhas a serem transversais:

.item1 {
  grid-row: 1 / 3;
}

Experimente você mesmo

Sintaxe CSS

grid-row: grid-row-start / grid-row-end;

Valor da propriedade

Valor Descrição
grid-row-start Define a partir de qual linha começar a exibir o item.
grid-row-end Define na qual linha de linha parar a exibição do item ou sobre quantas linhas estender.

Detalhes técnicos

Valor padrão: auto / auto
Herança: Não
Produção de animação: Suporte. Veja:Propriedades relacionadas a animação.
Versão: Módulo de Layout de Grade CSS Nível 1
Sintaxe do JavaScript: object.style.gridRow="2 / span 2"

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44