Fractional Units (fr)
The Unit That Makes Grid Feel Alive
Section titled “The Unit That Makes Grid Feel Alive”Pixel columns are rigid.
Percent columns are fragile.
fr is Grid’s native power move: divide the remaining space into fractions.
What fr Means
Section titled “What fr Means”fr stands for fraction of the available space inside the grid container.
Unequal Fractions
Section titled “Unequal Fractions”Fractions don’t need to be equal.
Mixing Fixed + fr
Section titled “Mixing Fixed + fr”Fixed sizes are calculated first.
Then the remainder becomes fraction territory.
🧪 MiniMo — Fraction Wars
Section titled “🧪 MiniMo — Fraction Wars”Pixels define.
Fractions adapt.
Extra Bits & Bytes
Section titled “Extra Bits & Bytes”📘 Grid Fractional Units - fr - Study Guide (PDF)
📘 Grid Fractional Units - fr - Infographic (PNG)
⏭ Skip the Repetition: repeat()
Section titled “⏭ Skip the Repetition: repeat()”Prevent your track definitions from becoming unmanageable.