What is the purpose of the gap (or grid-gap) property?

Q: What is the purpose of the gap (or grid-gap) property?

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. 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-gap` and `column-gap`). Improves readability and layout consistency by avoiding manual spacing on individual grid items. Works in both CSS Grid and Flexbox (as `gap` in Flexbox). Example: `gap: 20px;` adds 20px spacing between all rows and columns. .container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 150px 100px; gap: 15px; border: 2px solid #ccc; padding: 10px; } .item { background-color: #3498db; color: white; display: flex; justify-content: center; align-items: center; font-weight: bold; } 1 2 3 4 5 6

Difficulty: 3/10

grid-gap, layout spacing, CSS grid

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

1
Defines the space between rows and columns in a grid layout.
2
Can be specified as a single value (applies to both rows and columns) or two values (row-gap and column-gap).
3
Improves readability and layout consistency by avoiding manual spacing on individual grid items.
4
Works in both CSS Grid and Flexbox (as gap in Flexbox).

Example: Using gap in a Grid

Scenario Questions

0-2 years experience

Follow-up Questions