Get an overview of the FR unit in CSS: an input that automatically calculates layout divisions while adjusting for gaps inside a grid.
Fractions — or fractional units — are life-changing. Why? Because they are the most flexible and responsive units out there! Too bad they only exist within a grid.
A fraction or 1FR is one part of the whole. 1 fraction is 100% of the available space. 2 fractions are 50% each. So, 1FR is 1/2 of the available space. If there are 250 fractions? Then each fraction(1FR) is 1/250 or 0.4%.
So, 1 fraction is 1 (or 100) divided by the total number of fractions. We'll explore this more below.
It’s 2 fractions!
Whether you're going to use fractions or percentages, the first thing you'll need to do is:
For example, you have four columns. You want them all to be equal in size and fill the available space. You could set each column to be 100/4=25% wide.
But what if later you decide to make one of the columns twice as large as the others? (2X+X+X+X=100, how much is X?)
What if you need to add another column? Now five columns need to add up to a total of 100. So, each needs to be 100/5=20%. You'll need to update the value of each column if you do not want an overflow.
And what if you need to delete a column? or add gaps? You get the point, right? With percentages, each time you need to add or delete a column, change its sizing, add gaps, or change gap sizing, you'll need to:
Again, you have four columns. You want them all to be equal in size.
What if you want one to be twice as large as the others?
Now you have 4 columns but a total of 5FRs so automatically each fraction takes up 20% of the available space. So, the first column takes up 2 fractions of the space, that's 40%. No need for you to do any calculations or to update the sizing of each of the columns.
What if you add a column or delete one? You do nothing! Fractions just work!
Let's add some gaps. Fractions will adapt to welcome the gaps in their midst.
A fractional unit is 1 part of the total as long as the content is flexible. Meaning, 1FR tracks are equal in size as long as the content inside can scale to fit the column or row. However, once the content stops scaling to fit in the track, the track with an FR value will adjust to make the content fit. So, if one column has a grid child of fixed width, the width of that column will never be less than the width of the grid child.
So, a column with 1FR width has a minimum value equal to the content width whether that width is a set fixed unit like 400px, or it's the longest word in a text element.
But what happens to the other columns in the grid? They shrink proportionally. Why? Well, here's what happens:
The same is true for rows, a row of 1FR height has a minimum value equal to the content height unless you set overflow:hidden on the grid child.
FR automatically sets minimums which will respect the content inside. So with FRs, the minimum is automatic (or auto), the maximum is the value we've set (1FR, 2FR..)
So, 1FR is technically min/max(auto, 1FR), meaning min=auto, max=1FR.
Now, you can of course override this minimum by switching the sizing settings from default to min/max. The maximum will be 1FR and the minimum can be anything you specify. However, note that any content inside this track with a fixed width larger than the minimum you set here will overflow the grid cell.
You can specify any value for the minimum and the maximum size of a track in the min/max settings. A track with min/max values will be greater than or equal to the min value and less than or equal to the max value.
For example, by default, a row has a height of auto. This allows it to expand or shrink with the content within. Setting min/max values to rows is a great way to create flexible rows that don't shrink beyond a set minimum value. Let's say you want to have a row that's at least 5VH tall but don't want any content inside to overflow the row or get cropped. All you need to do is set the row size to min=5VH, max=auto.
Something went wrong while submitting the form. Please contact firstname.lastname@example.org