Gap

Utilities for gap.

Using gap-[numbers], you can control gutters between grid and flexbox items.

gap-
item 1
item 2
item 3
item 4
You can use numerical values which will be converted into a multiple of 0.25rem (can be changed in config → units) for consistent and precise sizing.

For example, "gap-5" will give you a gap of 1.25rem.
→
You can use Arbitrary values like "gap-(16px)" or "gap-(2em)" as well.
Learn more about Arbitrary Styling

Gap X

Using gap-x-[numbers], you can control the gutters between columns in grid and flexbox containers.

gap-x-
item 1
item 2
item 3
item 4
You can use numerical values which will be converted into a multiple of 0.25rem (can be changed in config → units) for consistent and precise sizing.

For example, "gap-x-5" will give you a gap-x of 1.25rem.
→
You can use Arbitrary values like "gap-x-(16px)" or "gap-x-(2em)" as well.
Learn more about Arbitrary Styling

Gap Y

Using gap-y-[numbers], you can control the gutters between rows in grid and flexbox containers.

gap-y-
item 1
item 2
item 3
item 4
You can use numerical values which will be converted into a multiple of 0.25rem (can be changed in config → units) for consistent and precise sizing.

For example, "gap-y-5" will give you a gap-y of 1.25rem.
→
You can use Arbitrary values like "gap-y-(16px)" or "gap-y-(2em)" as well.
Learn more about Arbitrary Styling