Overview of Partial Unit

Divisions — or fractional units — have a significant impact on our lives. Why? Because they offer the utmost versatility and adaptability! They handle grid divisions while also accounting for spaces in between. You can incorporate FR units wherever you utilize a grid, and given that the Quick Stack element utilizes a grid, you can employ FR units when customizing a quick stack.

What is a fraction (1FR)?

A fraction or 1FR represents a single portion of the whole. A single 1FR fraction equates to 100% of the available space. With two 1FR fractions, each comprises 50% of the available space. Therefore, in this scenario, 1FR equals half of the available space. Assuming there are 250 1FR fractions? Each fraction (1FR) then equates to 1/250 or 0.4%.

• In fractions: 1FR = 1/total number of FRs
• In percentages: 1FR = 100/total number of FRs

So, what are 2 fractions (2FR)?

Two fractions or 2FR represent two segments of the whole. Hence, if you have 1FR + 1FR + 2FR, the 1FR fractions amount to 25% each, while the 2FR fraction signifies 50%.

Fractions as opposed to percentages

Utilizing percentages

Suppose you aim to create a grid with 4 columns, each identical in size and occupying the entire available area. You could assign a width of 25% to each column by dividing 100 by 4.

However, what if you wish to enlarge one column by double the size of the others? In that case, you would have 2X + X + X + X, where X remains at 25%, resulting in a total of 125%. If you alter the width of one column to 50%, the columns exceed the available space by 25%. As the widths of your columns are established in percentages, you will have to recalibrate the width values and readjust the size of each column once more.

Imagine wanting to introduce another column. Now, the total should sum up to 100 for 5 columns. Hence, each one must be 100/5 = 20%. You will have to update the value of each column to avoid them overflowing the available space.

Every time you need to include or remove a column, modify the sizing of a row or column, incorporate gaps, or alter gap sizes when utilizing percentages, you will need to recalculate the size of each column and re-implement the new sizing value to each column.

Utilizing fractions (FR)

Once again, suppose you desire your grid to include 4 columns, each equal in size, and occupying the entire available space. To achieve this, establish 4 columns. That’s all! By default, each column possesses a width of 1FR, and they will stretch to utilize the available space.

If you wish one column to be twice the size of the others, simply designate it as 2FR — which equals 2 parts of the whole. The remaining columns, still set at 1FR, each take up one part of the whole.

Adding or removing rows or columns

Should you want to append or erase a row or column, you can do so without necessitating adjustments to their sizes. With FR, the rows and columns will naturally adjust.

Incorporating or altering gaps

By utilizing FR units, you can include gaps in your grid, and the rows and columns will automatically adjust.

FR and the content

1FR represents one part of the whole when the content enclosed within the row or column cell is adaptable (i.e., capable of scaling to fit the column or row). Nevertheless, once the content stops scaling, the row or column with an FR value will adapt to accommodate the content. The other columns and rows will shrink proportionally.

• Should a column contain a grid child with a fixed width, the column’s width will always equal or exceed the grid child’s width. Furthermore, a column’s width will never be less than the longest word within a text element. You can eliminate this issue by applying overflow: hidden to the grid child.
• If a row features a grid child with a fixed height, the row’s height will always equal or exceed the grid child’s height. You can tackle this by using overflow: hidden on the grid child.

Minimal/maximum

FR automatically establishes minimums that conform to the enclosed content. Therefore, with FRs, the minimum is automatic (i.e., auto), and the maximum corresponds to the value you’ve set (e.g., 1FR, 2FR, etc.)

You can supersede this minimum by transitioning from default to min/max for sizing. The maximum will be 1FR, whereas the minimum can be any value you pick. However, be mindful that any content with a fixed width beyond the minimum you specify will overflow the cell.