fr is a fraction of the screen it is espectially nice when you are working with CSS Grid because it will take a fraction of the the grid.
an example would be:
grid-template-column: repeat(4, 1fr)
This gives us a grid with 4 columns all taking up 25% of the whole space.
You can get more complex with something like this:
grid-template-column: 250px 1fr 2fr
This will create 3 columns, the first being a fixed width of 250px, the next taking 25% of the remaining width and the last taking 75% or the remaining width.