liveBook · Manning

Floor()

As explained in Math for Web Design

floor() is a CSS math function that rounds a numeric value down to the nearest integer.

floor() rounds a numeric value down to the nearest integer. In responsive CSS Grid layouts, it determines how many repeated tracks fit within the available container width. section 4.4.4

Counting responsive columns

For a 450px container with 10px gaps and 100px tracks, the browser calculates floor((450px − 3 × 10px) / 100px) = floor(4.2) = 4. The grid therefore creates four columns, leaving 50px unused. section 4.4.4

num_repetitions = floor((450px - 3 * 10px) / 100px)
                = floor(420px / 100px)
                = floor(4.2)
                = 4

Follow the calculation from container width and gaps to the final repetition count. section 4.4.4

The same repetition formula supports auto-fill and auto-fit. auto-fill retains empty tracks, while auto-fit collapses them and redistributes their space. section 4.4.4

How Math for Web Design covers it

How deep it goes
Explains the rounding rule, formula, and worked calculation, then stops at repetition counting rather than implementation internals.
Examples
Uses a 450px grid container, 10px gaps, 100px tracks, and contrasting auto-fill and auto-fit layouts.
What it assumes
Assumes familiarity with CSS Grid containers, tracks, gaps, and repeat() while teaching the rounding calculation directly.
What you can do after
Configure responsive CSS Grid repetitions and predict when layouts produce four tracks from available space.
How it connects
Connects floor() with CSS Grid, repeat(), auto-fill, auto-fit, gaps, and track sizing.
Cover of Math for Web Design
liveBookmanning.com
Read Math for Web Design on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Math for Web Design. The section links point to the parts of the book it draws on.