Ian Jones Logo

css fr

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.