Repeat()
The CSS repeat() function specifies a repeated sequence of grid track sizes or patterns, using a fixed or automatically determined repetition count.
CSS in Depth, Second Edition
The CSS repeat() function represents repeated grid track sizes or patterns in a grid-template declaration.
- How it is used
- Defines repeated or patterned grid tracks and supports responsive column layouts.
- How deep it goes
- Explains shorthand expansion, repeated patterns, named lines, and responsive auto-fit, without descending into browser layout internals.
- Examples
- Uses four auto rows, repeated fractional patterns, named row lines, and responsive card columns as concrete examples.
- What you can do after
- Apply repeat() to write compact fixed, patterned, named-line, and responsive CSS Grid track definitions.
Math for Web Design
repeat() is a CSS Grid function that expands a track-size pattern into a specified number of repeated tracks or an automatically determined repetition.
- How it is used
- Builds concise fixed or responsive CSS Grid track patterns without repeating each track declaration.
- How deep it goes
- Explains fixed expansion and automatic fit calculations, then distinguishes empty-track behavior without descending into browser implementation internals.
- Examples
- Uses fixed pixel columns, repeated multi-track patterns, fit calculations, and responsive card grids.
- What you can do after
- Apply it via CSS Grid to create repeated tracks and choose whether unused responsive columns remain or collapse.
Tiny CSS Projects
The repeat() CSS function represents repeated track definitions in grid-template-columns or grid-template-rows values.
- How it is used
- Improves CSS Grid declarations by expressing repeated column or row tracks compactly.
- How deep it goes
- Defines arguments and demonstrates combined sizing, but stops short of broader function authoring or advanced repetition behavior.
- Examples
- Uses repeated flexible columns, a fixed 250-pixel column, and a 3fr repeat(3, 1fr) fraction layout.
- What you can do after
- Apply it via CSS Grid to write shorter repeated column and row definitions with flexible or fixed track sizing.
Related concepts
- CSS Griduses · CSS Grid is a CSS layout system for arranging elements in two-dimensional rows and columns.
- grid-template-columnsconfigures · The CSS grid-template-columns property defines the sizes and optional names of a grid’s column tracks and grid lines.
- minmax()uses · The CSS minmax() function defines a grid track size within specified minimum and maximum limits.
- auto-fituses · A CSS Grid repeat() keyword that creates as many repeated tracks as fit within the available space and collapses empty tracks.
- grid trackproduces · A grid track is the space between two adjacent grid lines, forming a row or column in a CSS Grid layout.
- grid-template-rowsused by · The CSS grid-template-rows property defines the number, sizes, and track structure of a grid's rows.
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.