Grid gap in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the grid-gap property do in CSS Grid?

It adds space between rows and columns inside a CSS Grid container, creating gaps between grid items.

beginner

How do you set different gaps for rows and columns in CSS Grid?

Use grid-gap with two values: the first for row gap, the second for column gap. For example, grid-gap: 10px 20px; means 10px row gap and 20px column gap.

intermediate

What is the modern property that replaced grid-gap?

The gap property is the modern standard that works for CSS Grid and Flexbox. It replaces grid-gap.

beginner

Can grid-gap accept length units other than pixels?

Yes, it accepts any CSS length units like rem, em, %, or vh to control the gap size responsively.

beginner

Does grid-gap add space inside grid items or between them?

grid-gap adds space only between grid items, not inside them. It separates the items visually without changing their size.

What does grid-gap: 15px 30px; do?

A Sets 15px gap for both rows and columns

B Sets 15px gap between rows and 30px gap between columns

C Sets 30px gap between rows and 15px gap between columns

D Sets 30px gap for both rows and columns

grid-gap first value is row gap, second is column gap.

Which property is the modern replacement for grid-gap?

A gap

B grid-spacing

C grid-margin

D space-between

gap works for both CSS Grid and Flexbox and replaces grid-gap.

If you want equal space between all grid items, which is correct?

A grid-gap: 20px 10px;

B grid-gap: 10px 20px;

C grid-gap: 20px;

D grid-gap: 0;

One value sets equal gap for rows and columns.

Does grid-gap add space inside each grid item?

A No, it removes space between items

B Yes, it adds padding inside items

C Yes, it adds margin inside items

D No, it adds space only between items

grid-gap only creates space between grid items, not inside them.

Which units can you use with grid-gap?

A px, rem, em, %, vh

B Only px

C Only % and px

D Only em and rem

grid-gap accepts any valid CSS length units.

Explain how to create space between rows and columns in a CSS Grid layout.

Think about how you separate items visually in a grid.

Describe the difference between grid-gap and padding inside grid items.

Consider where the space appears relative to the grid items.