HTML & CSS - Mastery / CSS Grid System

Grid Gaps

↔️ Grid Gaps

Grid gaps allow you to add spacing between rows and columns in a grid layout — without affecting the size of the grid items themselves.

🔹 Basic Properties

✅ grid-gap (shorthand)

✅ row-gap: Sets the vertical space between grid rows.

✅ column-gap: Sets the horizontal space between grid columns.

📌 Key Notes

  • Gaps appear between grid items only, not before the first or after the last.

  • Works only in grid (or flex) containers.

  • Does not add margin or padding to items.

✅ Summary

Property

Use

grid-gap

Shorthand for both row and column gaps

row-gap

Controls vertical spacing

column-gap

Controls horizontal spacing