Las unidades de medida en CSS son una forma de definir los tamaños de los elementos HTML de nuestra página web. En este post, te presentamos la unidad relativa fr en CSS, muy útil cuando utilizamos el sistema de posicionamiento avanzado de CSS Grid.
¿Qué es la unidad relativa fr en CSS?
La unidad relativa fr en CSS o unidad de medida fr la introduce el sistema de posicionamiento CSS Grid. Esta unidad representa una fracción del contenedor. Entonces, 1fr representa una fracción, 2fr dos fracciones… La unidad relativa fr en CSS o unidad de medida fr es relevante para la creación de la cuadrícula en CSS Grid, llamada como grid fr, porque con ella podemos definir las medidas, tanto de las columnas como de las filas, en proporción con las demás.
Esto quiere decir que, por ejemplo, en vez de darle a una columna una unidad de medida absoluta, como lo son los píxeles, podemos asignarle una fracción del ancho total de las columnas.
Te proponemos un ejemplo para entender mejor fr en css. Piensa que tenemos una cuadrícula con seis elementos repartidos en dos columnas y tres filas. Entonces, decidimos usar la unidad relativa fr en CSS para definir sus tamaños. Si decidimos escribir, por ejemplo, <grid-template-columns: 2fr 1fr> para el tamaño de sus columnas y <grid-template-rows: 3fr 2fr 1fr> para el tamaño de sus filas, lo primero que hará el navegador es sumar las fracciones asignadas a cada fila o columna. Entonces, dividirá el largo o ancho total en ese número de fracciones y luego asignará las partes definidas a cada fila o columna.
En el caso del tamaño definido para las columnas en grid-template-columns, para el grid fr, el navegador verá que hay tres fracciones en total para el fr en css. Luego, dividirá el ancho total de la cuadrícula en tres y le asignará dos fracciones (2fr) a la primera columna y una fracción (1fr) a la segunda columna. Lo mismo pasará con la propiedad grid-template-rows. En este caso, la suma de las fracciones asignadas es seis. Entonces, el navegador dividirá el alto total de la cuadrícula en seis y asignará tres fracciones (3fr) para la primera fila, dos fracciones (2fr) para la segunda fila y una fracción (1fr) para la última fila de la unidad de medida fr.
¿Cómo se calculan las medidas con la unidad relativa fr en CSS?
Normalmente, cuando determinamos una unidad de medida relativa en CSS, esta depende de una unidad de medida absoluta, como la de fr en css. Puede que usemos el viewport como base o el tamaño de letra, pero siempre hay un número absoluto en el que nos estamos basando para realizar nuestros cambios. Sin embargo, con la unidad de medida relativa fr en CSS, no hay un valor inicial. Entonces, ¿cómo se calculan las medidas con la unidad relativa fr en CSS?
En el caso del ancho es muy sencillo: el navegador simplemente toma el ancho total del viewport y lo divide entre las fracciones que le hemos asignado a las columnas. Esto hace que, cuanto menos ancha sea la página, más angostas serán las columnas.
En el caso del alto, es un poco más complicado. Como sabemos, la web está diseñada para tener un alto indefinido, que se construye en relación a los elementos que deba disponer. Por ello, gracias a la barra de navegación vertical, no hay un alto exacto. Entonces, lo que hace el navegador es coger la fila que tenga determinada 1fr y darle el alto necesario para que los elementos de esa fila entren. A partir de este alto mínimo, calcula todas las demás fracciones.
Ten presente que estos cálculos automáticos solo suceden si no le asignamos la propiedad height o width a nuestro elemento contenedor. Si le diéramos uno de estos valores, por ejemplo, un height de 900 píxeles, el navegador usaría este valor para crear las fracciones y asignar los altos. En nuestro caso, la primera fila tendría 450px, que corresponden a 3fr de 800px, la segunda 300px (2fr) y la tercera 150px (1fr).
Ahora que sabes cómo funciona la unidad relativa fr en CSS, pero falta hablar sobre grid fr, ¡es hora de que la pongas en práctica! En KeepCoding creemos firmemente en el poder de mezclar la teoría con la práctica, pues solo así se pueden afianzar realmente los conocimientos. Por ello, te invitamos a seguir aprendiendo y programando en nuestro Desarrollo Web Full Stack Bootcamp, donde en pocos meses te convertirás en un experto del desarrollo web. ¡Anímate a inscribirte!
