Fraction unit
The CSS fr unit represents a share of the free space remaining in a grid container after non-flexible track sizes and other deductions are accounted for.
Math for Web Design
The fr unit is a CSS Grid flexible length unit representing a share of available space after fixed track sizes and other deductions.
- How it is used
- Builds proportional Grid tracks that adapt automatically as container space changes.
- How deep it goes
- Derives free-space formulas, box-model deductions, constraint adjustments, and zero-space behavior.
- Examples
- Calculates mixed fixed-and-flex tracks, a bordered container, zero-space overflow, and product-card grids.
- What you can do after
- Apply it via CSS Grid to calculate and choose proportional track sizes with minimum constraints.
CSS in Depth, Second Edition
The CSS fr unit represents a fraction of the leftover space in a grid container after non-flexible track sizes are accounted for.
- How it is used
- Defines proportional columns and rows when building CSS Grid layouts.
- How deep it goes
- Explains proportional sizing through worked layouts and mixed patterns, but stops short of browser sizing internals.
- Examples
- Uses equal three-column grids, fixed-plus-flexible columns, proportional page layouts, and repeated track patterns.
- What you can do after
- Build equal, proportional, mixed fixed-and-flexible, and repeated CSS Grid tracks with fr values.
Read how CSS in Depth, Second Edition explains fraction unit →
Tiny CSS Projects
The fr unit is a CSS Grid sizing unit that represents a share of the available space remaining after minimum sizes are applied.
- How it is used
- Sizes CSS Grid rows or columns proportionally by distributing space remaining after minimum track sizes are satisfied.
- How deep it goes
- Explains proportional allocation with cake diagrams and declarations, but stops short of detailed Grid sizing internals.
- Examples
- Uses cake portions, equal and weighted fr columns, and a three-column project declaration previewed with grid lines.
- What you can do after
- Build flexible CSS Grid columns with proportional tracks, repeat(), minmax(), and fixed-size neighbors.
Web Design Playground, Second Edition
The CSS fr unit is a flexible length unit representing a fraction of the free space in a grid container.
- How it is used
- Uses fr units to distribute free grid space and replace fixed column widths in liquid layouts.
- How deep it goes
- Explains proportional sizing, remaining-space behavior, row-height requirements, and conversion from pixel-based layouts.
- Examples
- Demonstrates 1fr, 1fr-to-3fr proportions, mixed pixel and fr columns, and repeat(3, 1fr) layouts.
- What you can do after
- Apply it via CSS Grid to build proportional columns and convert fixed-width layouts into liquid layouts.
Read how Web Design Playground, Second Edition explains fraction unit →
Related concepts
- CSS Gridused by · CSS Grid is a CSS layout system for arranging elements in two-dimensional rows and columns.
- fluid layoutused by · A fluid layout is a web layout whose dimensions adapt continuously to changes in available viewport space.
- mathematical expressionuses · A mathematical expression is a syntactically structured combination of values, variables, operators, functions, and grouping symbols that denotes a value or computation.
- grid-template-rowsuses · The CSS grid-template-rows property defines the number, sizes, and track structure of a grid's rows.
- grid-template-columnsuses · The CSS grid-template-columns property defines the sizes and optional names of a grid’s column tracks and grid lines.
- minmax()used by · The CSS minmax() function defines a grid track size within specified minimum and maximum limits.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.