Grid Template

Define the structure of your grid with template properties.

grid-template-columns

Define column tracks:

grid-template-rows

Define row tracks:

The repeat() Function

Create repeating patterns:

Mixed Units

Combine different units:

minmax() Function

Set minimum and maximum sizes:

auto-fit and auto-fill

Create responsive grids:

Interactive Playground

Practical: Dashboard Layout

Exercise: Create a 4-Column Grid

Use repeat() to create 4 equal columns: