Unidade fr em CSS Grids

Os tamanhos das linhas e colunas no grid podem ser definidos não apenas em px, mas também em unidades de flexibilidade fr (fração). O uso dessas unidades significa que todo o espaço para a colocação dos elementos será dividido em partes iguais ou frações. Cada elemento poderá ocupar uma determinada parte dessa divisão. Vamos ver como isso é feito.

Vamos usar a propriedade grid-template-columns para fazer com que a primeira e a segunda colunas do grid ocupem uma parte do contêiner, e a terceira coluna - três partes:

<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-columns: 1fr 1fr 3fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Suponha que seu grid tenha duas colunas. Faça com que elas tenham a mesma largura.

Suponha que seu grid tenha três colunas. Faça com que elas tenham a mesma largura.

Suponha que seu grid tenha três colunas. Faça com que a terceira coluna seja duas vezes maior que a primeira e a segunda.