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