Atributo CSS grid-template-rows

Definição e uso

grid-template-rows define o número de linhas (e a altura) no layout de grade.

Os valores são listas separadas por espaços, onde cada valor especifica a altura da linha correspondente.

Veja também:

Tutorial CSS:Layout de grade CSS

Manual de referência CSS:Propriedade grid-columns

Manual de referência CSS:Propriedade grid-template

Exemplo

Defina o tamanho da linha (altura):

.grid-container {
  display: grid;
  grid-template-rows: 100px 300px;
}

Experimente você mesmo

Sintaxe CSS

grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;

Valor do atributo

Valor Descrição
none Não foi definido o tamanho. Crie a linha conforme necessário.
auto O tamanho da linha depende do tamanho do contêiner e do tamanho do conteúdo do item na linha.
max-content Defina o tamanho de cada linha com base no item mais grande da linha.
min-content Defina o tamanho de cada linha com base no item mais pequeno da linha.
length Defina o tamanho da linha, usando valores de comprimento válidos. VejaUnidades de comprimento.

Detalhes técnicos

Valor padrão: none
Herança: Não
Produção de animação: Suportado. Veja:Propriedades relacionadas a animação.
Versão: Módulo de Layout de Grid CSS Level 1
Sintaxe JavaScript: object.style.gridTemplateRows="50px 200px"

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