Propriedade grid-template

A propriedade grid-template define o número e a largura das linhas e colunas que um elemento ocupará no grid ou grade e é uma forma abreviada das propriedades grid-template-rows e grid-template-columns. As linhas e colunas onde o elemento será posicionado são indicadas por uma barra. A propriedade grid-template é definida no elemento pai e determina a disposição dos elementos filhos. No valor da propriedade, especificamos a largura das linhas ou colunas em qualquer unidade de medida para tamanhos.

Ao especificar valores em pixels nas propriedades, os tamanhos dos elementos corresponderão exatamente a eles. Se usarmos a palavra auto, as colunas e 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 da fr é sua adaptabilidade a diferentes contêineres ou resoluções de tela, pois a fr simplesmente divide o espaço no número de frações especificado sem vinculação a um tamanho exato em pixels.

Sintaxe

seletor {
	grid-template: largura e número de linhas / largura e número de colunas;
}

Exemplo

Vamos usar a propriedade grid-template para criar uma tabela:

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

Exemplo

Agora vamos definir a segunda e a terceira linhas com a mesma largura, e cada coluna com 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: 60px 1fr 60px / 20% 1fr 15%;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#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: 2fr 1fr 1fr / 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,
que define uma forma abreviada das propriedades de colunas e linhas
a propriedade grid-template-rows,
que define o número e a largura das linhas no grid
a propriedade grid-template-columns,
que define o número e a largura das colunas no grid