Número e largura de colunas em grades CSS

Vamos começar nossa introdução ao trabalho com grades definindo o número e a largura das colunas nas quais os elementos filhos serão posicionados. Para esse propósito, usamos a propriedade grid-template-columns, que é especificada no elemento pai e define o número e a largura das colunas que os elementos filhos ocuparão na grade. No valor da propriedade, especificamos a largura das colunas em pixels.

Exemplo

Primeiro, vamos criar um elemento pai e torná-lo um contêiner de grade. Suponha que temos um div que contém quatro elementos filhos. Vamos definir para ele o valor grid na propriedade display, e na propriedade grid-template-columns especificar a largura para duas colunas:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 200px 400px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Exemplo

Agora vamos criar uma tabela com quatro colunas de tamanhos diferentes:

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

#parent {
	display: grid;
	grid-template-columns: 50px 100px 200px 250px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Tarefas práticas

Suponha que você tenha uma div com nove elementos filhos. Torne o elemento pai um contêiner de grade.

Posicione os elementos filhos em duas colunas com largura de 200px.

Posicione os elementos filhos em três colunas com largura de 150px.

Posicione os elementos filhos em três colunas: a primeira com largura de 100px, a segunda 150px e a terceira 200px.