Gap between grid cells in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the gap utility in Tailwind CSS do in a grid layout?

The gap utility adds space between grid cells, both horizontally and vertically, making the layout clearer and easier to read.

beginner

How do you add a 1rem gap between grid cells using Tailwind CSS?

Use the class gap-4 because Tailwind's spacing scale sets 4 to 1rem by default.

intermediate

What is the difference between gap-x-4 and gap-y-4 in Tailwind CSS?

gap-x-4 adds horizontal space between grid columns, while gap-y-4 adds vertical space between grid rows.

intermediate

Why is it better to use Tailwind's gap utilities instead of margin on grid items?

Using gap keeps spacing consistent and avoids collapsing margins or uneven spacing that can happen with margins on individual items.

intermediate

Can you use different gap sizes for horizontal and vertical spacing in Tailwind CSS grids?

Yes, by combining gap-x-* and gap-y-* classes, you can set different horizontal and vertical gaps.

Which Tailwind class adds equal space between all grid cells?

A gap-4

B m-4

C p-4

D space-x-4

gap-4 adds equal spacing between all grid cells horizontally and vertically.

How do you add only vertical spacing between grid rows in Tailwind?

A gap-y-4

B space-y-4

C gap-4

D gap-x-4

gap-y-4 adds vertical space between grid rows only.

What is the default unit for Tailwind's gap utilities like gap-4?

A percent

B em

C px

D rem

Tailwind's spacing scale uses rem units by default, so gap-4 equals 1rem.

Why might using margin on grid items be less ideal than using gap?

A Margins add padding inside cells

B Margins are ignored in grids

C Margins collapse and cause uneven spacing

D Margins only work on flexbox

Margins can collapse or create uneven spacing, while gap ensures consistent space between grid cells.

Which classes would you combine to have 1rem horizontal gap and 0.5rem vertical gap?

A gap-4 gap-2

B gap-x-4 gap-y-2

C gap-2 gap-x-4

D gap-y-4 gap-x-2

gap-x-4 sets horizontal gap to 1rem and gap-y-2 sets vertical gap to 0.5rem.

Explain how to control spacing between grid cells in Tailwind CSS and why it is useful.

Think about how <code>gap</code> works and why it is better than margins.

Describe how you would set different horizontal and vertical gaps in a grid using Tailwind CSS classes.

Use separate classes for horizontal and vertical gaps.