Número e largura de linhas em grades CSS

Os elementos da grade também podem ser posicionados em linhas. Para isso, existe a propriedade grid-template-rows. Esta propriedade aceita os tamanhos das linhas separados por espaços. Podemos usar os mesmos valores que estudamos para as colunas.

Exemplo

Por exemplo, vamos posicionar os blocos em quatro linhas:

<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: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Exemplo

Vamos definir uma largura fixa em pixels para a primeira e a terceira linhas, e deixar a segunda linha ocupar o espaço restante:

<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: 600px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Exemplo

Vamos usar a função repeat para definir os tamanhos das linhas:

<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: 600px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Exemplo

Vamos definir a altura das linhas como 50px, e o número de linhas será definido automaticamente usando o valor auto-fill:

<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;
}

Tarefas práticas

Posicione os blocos em três linhas. Deixe o primeiro bloco com tamanho 100px, o segundo 150px, e o terceiro 200px.

Suponha que sua grade tenha três linhas. Faça com que elas tenham a mesma largura.