de que depende el tamaño de fr? o ya tiene un tamaño predeterminado

es como decir fracciones y depende del tamaño del contenedor por eso es muy bueno para resposive desig :)

El ancho de cada columna depende del ancho disponible en el contenedor dividido entre el número de fracciones así: ancho columna = ancho contenedor / total # fr.

Ejemplo-1, tenemos grid-template-columns: 1fr 2fr 1fr; con un ancho de contenedor de 1000px, tenemos que: ancho de cada columna: 1000px / (1fr + 2fr + 1fr) 1000px / (4fr) 250px / fr Es decir, a cada fracción le corresponden 250px.

Ejemplo-2, tenemos grid-template-columns: 2fr 3fr 1fr; con un ancho de contenedor de 600px, tenemos que: ancho de cada columna: 600px / (2fr + 3fr + 1fr) 600px / (6fr) 100px / fr Es decir, a cada fracción le corresponden 100px.