CSS Grid lets you create layouts using rows and columns.
You define the structure of the grid using grid-template-columns and grid-template-rows.
These two properties decide how many columns and rows your layout will have and how big they will be.
In this example, the grid has three columns and two rows.
The first row has a fixed height, and the second row takes the remaining space.
This method is commonly used to build page sections like headers and content areas.
The repeat function makes your CSS cleaner.
Here, four equal columns and two equal rows are created without repeating the same value again and again.
This is a real website layout built using grid columns and rows.
The header and footer span across all columns, while the sidebar and content share the middle row.
Common ways to define columns and rows
- Use fixed values like 100px
- Use flexible values like 1fr
- Use repeat for repeating patterns
- Mix fixed and flexible sizes for responsive layouts
Fraction units let you control how much space each column gets.
In this example, the first column is twice as wide as the others.
Practice task
Create a grid container and:
- Add three columns using fr units
- Add two rows using fixed heights
- Place at least six items
- Change column sizes and see the effect
Next lesson
In the next page, you will learn about grid gap and spacing between items.