CSS Grid grid-gap, row-gap, and column-gap

CSS Grid grid-gap, row-gap, and column-gap

The grid-gap property (now officially replaced by gap, row-gap, and column-gap) is used to define space between rows and columns in a CSS Grid layout. This ensures uniform spacing between grid items without requiring margins or padding on each element.

Why Use gap or grid-gap?

• Create consistent spacing between rows and columns
• Avoid adding manual margins on individual items
• Keep layouts clean and modular
• Improve flexibility in grid-based designs

Syntax

Shorthand:

Longhand:

Example: Grid Gap in Action

Explanation

• gap: 20px adds 20px spacing between all rows and columns
• To apply different spacing, use gap: 10px 40px
  • 10px between rows
  • 40px between columns
• Helps maintain consistent layout spacing without affecting item size

Best Practices

• Prefer using gap instead of grid-gap (modern CSS Grid Level 2)
• Only use gap on containers with display: grid or display: flex
• Avoid using margins on child elements when using grid gaps
• Use in combination with auto-fit or grid-template-columns for responsive grids

Common Use Cases

• Spacing between cards in a card grid layout
• Uniform gaps in image galleries
• Clean spacing in form layouts
• Dashboard widgets or tile-based UIs

Key Takeaways

• gap is the preferred shorthand for CSS Grid spacing
• grid-gap, row-gap, and column-gap manage inter-item spacing
• gap: 10px 20px defines vertical and horizontal spacing
• Works only in grid and flex containers
• Keeps layout spacing clean without using margins inside child elements