Propriedade grid-template-rows
A propriedade grid-template-rows define
a quantidade e a largura das linhas que
um elemento ocupará no grid ou grade.
No valor da propriedade, especificamos a largura das linhas
em qualquer unidade
de tamanho.
A propriedade é especificada no elemento pai
e define a largura das linhas dos elementos filhos.
Ao especificar valores em pixels nas propriedades,
os tamanhos das linhas corresponderão exatamente a eles.
Se usarmos a palavra auto, as linhas
preencherão todo o espaço disponível. O uso
da unidade fr (fração) significa
que todo o espaço será dividido
em partes iguais. A vantagem
de fr é sua adaptabilidade a
diferentes contêineres ou resoluções de tela,
pois fr simplesmente divide-os no número
especificado de frações sem vinculação a um tamanho exato em pixels.
Sintaxe
seletor {
grid-template-rows: largura da linha;
}
Exemplo
Vamos definir a largura das linhas para nossos elementos no grid:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: 50px 100px 50px 50px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplo
Vamos definir para a primeira e terceira linhas uma largura fixa em pixels, e a segunda linha preencherá automaticamente o espaço disponível:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 100px auto 60px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplo
Agora, usando a propriedade
grid-template-rows,
vamos fazer com que a primeira e a segunda
linhas ocupem uma parte do contêiner,
e a terceira linha - três partes:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplo
Os valores especificados em unidades fr
podem ser fracionários. Vamos
modificar o exemplo anterior, especificando
para a segunda e terceira linhas uma largura
em números fracionários:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplo
Vamos usar na propriedade grid-template-rows
a função repeat(),
que informará ao contêiner que todas
as três linhas devem ter a mesma largura:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplo
Agora, vamos modificar o exemplo anterior para que às três linhas idênticas seja adicionada uma quarta, que ocupará duas frações do contêiner:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplo
Vamos definir para as duas primeiras linhas uma largura de uma fração do contêiner, e para as duas últimas linhas - duas frações:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(2, 1fr) repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplo
Agora, vamos definir a largura das linhas
combinando valores especificados usando
a função repeat() e unidades livres fr:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(2, 1fr) 3fr repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 300px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplo
Também na função repeat() podemos especificar
o valor auto-fill, que preencherá
nosso contêiner com linhas idênticas da largura desejada:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fill, 50px);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplo
É muito conveniente usar junto com auto-fill
a função minmax,
que define um intervalo de largura das linhas
de um valor mínimo a um valor máximo.
Se a largura do contêiner não couber todas
as linhas, algumas delas se moverão
para uma nova linha, enquanto as linhas na linha
serão distribuídas uniformemente nela. Vamos modificar
o exemplo anterior, especificando nele a função minmax:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fill, minmax(50px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplo
Agora, vamos especificar a propriedade auto-fit,
cuja diferença para auto-fill está no fato
de que ela ajusta a quantidade de linhas
à largura disponível do contêiner, expandindo ou
comprimindo-as:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplo
Também, junto com fr, podemos
usar valores em %, que também definem
que parte do contêiner a linha ocupará.
Neste caso, primeiro será calculado o tamanho
da linha em %, e o espaço livre restante
será dividido em frações:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplo
Vamos usar juntas as propriedades
grid-template-columns e
grid-template-rows:
<div id="parent">
<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>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplo
Vamos usar as propriedades
grid-template-columns e
grid-template-rows
criar uma tabela de nove células, dispostas
em três linhas. Porém, a segunda e a terceira linhas terão a mesma largura,
e cada coluna - uma largura diferente:
<div id="parent">
<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>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 20% 1fr 15%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemplo
Agora, na tabela do exemplo anterior, vamos fazer a linha superior ter uma largura de duas frações, e a primeira coluna - meia fração:
<div id="parent">
<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>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 2fr 1fr 1fr;
grid-template-columns: 0.5fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Veja também
-
a propriedade
grid-template-columns,
que define a quantidade e a largura das colunas no grid -
a propriedade
grid-auto-rows,
que define a quantidade e a largura das linhas no grid implícito
