What is the purpose of the gap (or grid-gap) property?
Using Gap in CSS Grid
The gap (previously called grid-gap) property in CSS Grid is used to create consistent spacing between grid rows and columns without adding extra margins to grid items.
Key Points
Defines the space between rows and columns in a grid layout.
Can be specified as a single value (applies to both rows and columns) or two values (
row-gapandcolumn-gap).Improves readability and layout consistency by avoiding manual spacing on individual grid items.
Works in both CSS Grid and Flexbox (as
gapin Flexbox).Example:
gap: 20px;adds 20px spacing between all rows and columns.
Example: Using gap in a Grid