liveBook · Manning

Fixed repetition

As explained in Math for Web Design

Fixed repetition is a CSS Grid repetition mode in which a pattern is expanded a predetermined number of times.

Fixed repetition expands a CSS Grid pattern a predetermined number of times. With repeat(n, size), the size is written n times, producing the same track sequence as the expanded declaration. section 4.4.4

Expanding a repeated pattern

grid-template-columns: repeat(3, 100px); creates three 100px columns, equivalent to writing 100px 100px 100px. For a multi-track pattern, repeat(2, 100px 200px 50px) produces six tracks: three pattern tracks multiplied by two repetitions. section 4.4.4

How Math for Web Design covers it

How deep it goes
Explains expansion and calculates total tracks as pattern length multiplied by repetition count, then contrasts dynamic alternatives.
Examples
Uses repeated 100px columns and a two-repeat, three-track pattern to verify equivalent expanded declarations.
What it assumes
Assumes familiarity with CSS Grid track definitions and the repeat() function’s basic syntax.
What you can do after
Apply it via CSS Grid by replacing repeated track listings with repeat() and calculating the resulting track count.
How it connects
Connects repeat() with CSS Grid tracks, auto-fill, and auto-fit repetition algorithms.
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.