Repetitions and fraction functions in CSS Grid are powerful tools that allow for creating complex and adaptable layouts efficiently. Understanding how to utilize repeat() and the fraction units (fr) will help you design flexible and responsive grids.

repeat() Function

The repeat() function allows you to define repetitive patterns in the grid without specifying each track manually. It is especially useful when you need to create equally sized columns or rows.

Basic Syntax

The basic syntax of repeat() is:

css

Simple Example

css

Advanced Use of repeat()

Automatic Repetitions with auto-fill and auto-fit

• auto-fill: Fills the container with as many tracks as possible, leaving empty space if any.
• auto-fit: Fills the container with as many tracks as possible, stretching the tracks to fill all available space.

css

[Placeholder: Image showing the behavior of auto-fill and auto-fit]

minmax() Function

The minmax() function allows you to define a minimum and maximum size for the tracks, making the grid more adaptable.

Example with minmax()

css

[Placeholder: Image showing a grid using minmax() to adjust column sizes]

Fraction Units (fr)

The fraction unit (fr) is particularly useful for distributing available space in the grid proportionally.

Simple Example with fr

css

[Placeholder: Image showing a grid with proportional columns using fr]

Combining repeat(), minmax(), and fr

Combining these functions allows you to create even more complex and flexible layouts.

Complete Example

css

Complete Example in HTML

html

In this example, repeat() is combined with minmax() and fr to create a flexible and adaptable grid that automatically adjusts columns and rows according to the container size and content.

Conclusion

Repetition and fraction functions in CSS Grid are essential for creating adaptable and elegant designs. By mastering repeat(), minmax(), and fr, you can build grids that adapt to any type of content and device, improving user experience and development efficiency.