Propriedade grid-template-columns §

---

A propriedade grid-template-columns é usada para definir o tamanho e a quantidade de colunas em um contêiner grid. Ao utilizar essa propriedade, é possível criar layouts bidimensionais especificando o tamanho de cada coluna individualmente ou utilizando unidades de medida.

Sintaxe §

A sintaxe da propriedade grid-template-columns envolve a definição dos tamanhos desejados para as colunas. Pode-se fornecer um valor único para todas as colunas ou uma lista de valores separados por espaços para atribuir tamanhos diferentes a cada coluna.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr; 
  /* Duas colunas com tamanhos diferentes */
}

Diversas unidades de medida podem ser empregadas para definir o tamanho das colunas, incluindo pixels, porcentagens e frações (fr).

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  /* Três colunas com a mesma largura */
}

Nota

A unidade fr é particularmente útil para criar layouts responsivos, pois representa uma fração da unidade disponível no contêiner.

Exemplo §

Considere o exemplo a seguir:

.grid {
	max-width: 1000px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3 1fr);
	gap: 20px;
}
 
.grid div {
	background: tomato;
	text-align: center;
	min-height: 100px;
}
 
.grid div:nth-child(3) {
	grid-row-start: 1;
	grid-row-end: 3;
}

<div class="grid">
	<div style="background: red;">Item 1</div>
	<div style="background: blue;">Item 2</div>
	<div style="background: green;">Item 3</div>
	<div style="background: gray;">Item 4</div>
</div>

Referências §

---

• Curso de JavaScript e TypeScript do básico ao avançado