CSS Grid allows you to place items exactly where you want using grid lines.
Instead of letting items flow automatically, you can control their position using grid-column and grid-row.
This is very useful when building complex layouts like dashboards and landing pages.
Grid-column 1 / 3 means the item starts at line 1 and ends at line 3.
This makes the item stretch across two columns.
This example shows how grid lines help build a full page structure.
Each section is placed in a specific area using grid-column and grid-row.
Here, one product is highlighted by spanning across two columns.
This technique is often used in e-commerce and portfolio layouts.
Important things to remember
- Grid lines start from 1, not 0
- You can use line numbers or span values
- grid-column and grid-row give full control over layout
Using span makes your code easier to read.
Instead of counting lines, you can tell Grid how many columns or rows an item should cover.
Practice task
Create a grid container and:
- Add three columns and three rows
- Place one item across two columns
- Place another item across two rows
- Try using both line numbers and span
Next lesson
In the next page, you will learn about grid template areas.