Grid Gap and Spacing

Control the space between grid items with gap properties.

The gap Property

Add space between all items:

row-gap and column-gap

Different gaps for rows and columns:

gap Shorthand

Two values: row-gap column-gap

No Gap

Compare with and without gap:

Interactive Playground

Gap with Borders

Gap replaces the need for margin tricks:

Practical: Image Gallery

Gap Units

You can use any CSS unit:

Exercise: Add Gap

Add a 15px gap between grid items: