Unidad relativa fr en CSS

Autor: | Última modificación: 29 de junio de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post: ,

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 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 es relevante para la creación de la cuadrícula en CSS Grid 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. 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, el navegador verá que hay tres fracciones en total. 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.

¿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. 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).

¿Qué sigue?

Ahora que sabes cómo funciona la unidad relativa fr en CSS, ¡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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!