Que es 1fr, no me quedo de todo claro, alguien me puede aclarar eso?.

Hola Randy ! Está muy buena tu pregunta 😊

1fr es lo mismo que decir 1 fracción.

Si por ejemplo necesitas dividir tu layout en 4 columnas iguales, lo que haces es escribir algo como:

grid-template-columns: 1fr 1fr 1fr 1fr;

O, también puedes escribir:

grid-template-columns: repeat(4, 1fr);

Literal, es como si vieras tu layout como un pastel y lo porcionaras en la cantidad de pedacitos que deseas 😊

Me cuentas si quedó mucho más claro ! 🙏🏼