CSS Grid FR Unit Calculator

Calculate FR unit values based on grid containers.

Loading converter...
Share this tool:

What is FR Unit Calculator?

An FR Unit Calculator helps calculate how CSS Grid fractional units (fr) are distributed within a container. It is used to design responsive layouts. Calculate column widths by converting PX to FR or FR to PX.

How To Find FR Unit Calculation?

To calculate FR units, divide available container space into equal or weighted fractions based on defined grid columns or rows. This ensures flexible and adaptive layouts.

Grid Track Size Formula

px=
frtotal fr
× available space
Where:
frTrack FractionThe fraction value of the specific grid column or row.
total frTotal FR tracksThe sum of all fraction values in the grid definition.
available spaceAvailable SpaceThe size of the grid container minus gaps and non-fractional tracks.
pxTrack Width/HeightThe computed layout track size in pixels.