¿Cuál sería la diferencia entre las unidades de medida de pocentaje % y las de fracción fr?

CSS GRID con la función fr, hace el cálculo por ti y no te tienes que preocupar para distribuir el espacio.

Hola!!! Me ayuda mucho estas respuestas, muchas gracias, pero sigo con una duda, en base a que hace el tamaño fr, por ejemplo, en el ejercicio de @tania-smith utiliza 3fr 2fr 1fr, estas 3 medidas las calcula en base a que??? Al width = 100% si es así, entiendo, pero en el ejemplo de Leonidas no coloca ninguún width...

Agradezco su ayuda...

La diferencia es simple, primero tu tienes que saber perfectamente que es el viewport, luego comprenderás que las fracciones "fr" y porcentajes "%" son herramientas que te ayudan a posicionar tus contenedores dentro del viewport, si estás trabajando con grid usa fracciones caso contrario usa porcentajes, ambos tienen un ámbito singular de uso, ambos son unidades de medida relativas y ambos son considerados buenas prácticas.

Con la fracción entiendo que se calcula automáticamente mientras que con el porcentaje tu eres quien le da el valor que quieras.

Usar fr deduce automáticamente el tamaño de la columna (para llenar el espacio disponible). Con porcentajes, debe usar calc (). Este es un ejemplo de como se aplicaría...

Grid usando fr

Grid usando %

fr es una medida de longitud flexible que se relaciona con el resto de la cuadrícula, tamaño de las otras columnas, valores del espacio entre columnas y también con el contenido que lleven dentro las columnas, mientras que el porcentaje es una medida basada en la longitud total y hay que utilizar calc () para ser mas preciso.

Espero que haya sido útil. ◕ ◡ ◕ Aqui se puede leer más.. https://www.w3.org/TR/css3-grid-layout/#valdef-flex-fr

Básicamente las fracciones ---> significa que le vas asignar en partes iguales a los componentes, pero a la vez, puedes asignarle el doble de 1 fr a otro componente es decir 2fr, esto sería que el componente #1 tendra una fracción y el componente 2 tendría el doble de esa fracción.

Y por último los porcentajes ya son valores que tú le asignas según el width o height total, digamos componente #1 40% del espacio que tienes disponible y al componente #2 60% que es el restante restante.

Puedes usarlo a tú mejor criterio!

Los fr son fracciones.

ejemplo si tienes 5 fracciones de 100px.

3fr serían 60px