Grid gap controls the space between rows and columns in a grid layout.
Instead of using margins on every item, you can use a single property to manage spacing cleanly.
This makes your layout easier to maintain and more consistent.
The gap property adds equal spacing between all rows and columns.
You do not need to add margin to each item, which keeps your CSS simple.
You can control spacing separately using row-gap and column-gap.
This is useful when you want more space vertically than horizontally.
This is how spacing is managed in dashboards and product grids.
Using gap keeps the layout clean and professional.
Things to remember about grid spacing
- gap is the modern replacement for grid-gap
- You can use row-gap and column-gap separately
- Avoid using margins for spacing inside grids
Grid spacing is commonly used in image galleries, portfolios, and blog layouts.
Practice task
Create a grid container and:
- Add at least six items
- Set gap to 10px
- Try different values for row-gap and column-gap
- Observe how spacing changes
Next lesson
In the next page, you will learn how to place items using grid lines.