CSS repeat() Function Overview

Overview

The lecture explains the CSS repeat() function, which simplifies defining repeating columns or rows in grid layouts, and details its syntax, usage forms, and rules.

Purpose and Use

• The repeat() function creates recurring column or row patterns in CSS Grid layouts using compact syntax.
• It is used mainly in grid-template-columns and grid-template-rows properties.

Syntax and Arguments

• Basic syntax: repeat(count, tracks), e.g., repeat(2, 60px).
• The first argument sets the repeat count, which can be an integer, auto-fill, or auto-fit.
• The second argument is a track list, specifying the size(s) of the track(s) to repeat, e.g., 60px, 1fr, minmax(), or a sequence like 20px 1fr.
• Line names can also be included in the track list, e.g., [col-start] 60px [col-end].
  • Grid-template-rows: repeat(2, minmax(100px,500px))

Forms of repeat()

• : Integer repeat count + , allows flexible and keyword track sizes.
• : Uses auto-fill or auto-fit for repeat count, must use .
• : Integer count + .
• : For subgrid, repeats only line names (not track sizes).

Typical Values for Tracks

• : Uses length (e.g., 40px), percent, or minmax() with length/percentage.
• : Uses fr units to distribute remaining space, e.g., 1fr.
• : Can use length, percent, fr, min-content, max-content, auto, minmax(), or fit-content().

Special Keywords

• auto-fill: Repeats tracks as many times as fits in the container, creating empty tracks if needed.
• auto-fit: Like auto-fill, but collapses empty tracks to 0px after placing items.
• min-content / max-content: These set the track size based on minimum/maximum content contributions.
• auto: As minimum, uses the largest minimum size of items; as maximum, same as max-content.

Usage Examples

• grid-template-columns: repeat(2, 60px); creates two 60px columns.
• grid-template-columns: repeat(auto-fill, 40px); fills the row with as many 40px columns as will fit.
• grid-template-columns: repeat(2, 20px 1fr); creates two sets of a 20px and a flexible column.

Rules and Limitations

• If using , only can appear in additional repeat calls within the same property.
• Mixing and in one property declaration is invalid.

Key Terms & Definitions

• repeat() — CSS function for repeating column or row patterns in a grid layout.
• track list — Sequence of column or row sizes and optional line names.
• auto-fill — Fills grid container with as many tracks as fit, including empty ones.
• auto-fit — Fills grid and collapses empty tracks after item placement.
• fr unit — Fractional unit for distributing available space in a grid.

Action Items / Next Steps

• Practice using repeat() with grid-template-columns and grid-template-rows.
• Review the differences between auto-fill and auto-fit.
• Experiment with repeat() in code examples to understand various forms and restrictions.