Unidad fr en CSS Grid

Los tamaños de las filas y columnas en grid pueden establecerse no solo en px, sino también en unidades de flexibilidad fr (fracción). El uso de estas unidades significa que todo el espacio para colocar los elementos se dividirá en partes iguales o fracciones. Cada elemento podrá tomar una parte determinada de esta división. Veamos cómo se hace.

Usemos la propiedad grid-template-columns para hacer que la primera y segunda columna del grid ocupen una parte del contenedor, y la tercera columna - tres 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;
}

Supongamos que tu grid tiene dos columnas. Haz que tengan el mismo ancho.

Supongamos que tu grid tiene tres columnas. Haz que tengan el mismo ancho.

Supongamos que tu grid tiene tres columnas. Haz que la tercera columna sea dos veces más grande que la primera y la segunda.