Unidad fr

La unidad de flexibilidad fr representa una parte o fracción del tamaño total del espacio en el que se encuentra el elemento. La ventaja de usar fr es su adaptabilidad a diferentes contenedores o resoluciones de pantalla, ya que fr simplemente distribuye todo el espacio en la cantidad especificada de fracciones (partes) sin estar vinculado a su tamaño exacto en píxeles.

Ejemplo

Usemos la propiedad grid-template-columns para hacer que la primera y segunda columna de la cuadrícula 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>

#parent {
	display: grid;
	grid-template-columns: 1fr 1fr 3fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Ejemplo

Los valores especificados en unidades fr pueden tener forma fraccionaria. Modifiquemos el ejemplo anterior, especificando para la segunda y tercera columna un ancho en números fraccionarios:

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

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

Véase también

unidad px,
que establece el tamaño en píxeles
unidad em,
que establece el tamaño en em
unidad rem,
que establece el tamaño en rem
unidad %,
que establece el tamaño en porcentajes
unidad vw,
que establece el tamaño en vw
unidad vh,
que establece el tamaño en vh
unidad vmax,
que establece el tamaño en vmax
unidad vmin,
que establece el tamaño en vmin