Skip to content

Gap

Controls gaps between grid and flexbox elements.

Utility Properties

g-0

gap: 0rem;

g-1

gap: 0.25rem;

g-2

gap: 0.5rem;

g-3

gap: 0.75rem;

g-4

gap: 1rem;

g-5

gap: 1.25rem;

g-6

gap: 1.5rem;

g-7

gap: 1.75rem;

g-8

gap: 2rem;

g-9

gap: 2.25rem;

g-10

gap: 2.5rem;

g-11

gap: 2.75rem;

g-12

gap: 3rem;

g-13

gap: 3.25rem;

g-14

gap: 3.5rem;

g-15

gap: 3.75rem;

g-16

gap: 4rem;

g-17

gap: 4.25rem;

g-18

gap: 4.5rem;

g-19

gap: 4.75rem;

g-20

gap: 5rem;

g-21

gap: 5.25rem;

g-22

gap: 5.5rem;

g-23

gap: 5.75rem;

g-24

gap: 6rem;

g-25

gap: 6.25rem;

g-26

gap: 6.5rem;

g-27

gap: 6.75rem;

g-28

gap: 7rem;

g-29

gap: 7.25rem;

g-30

gap: 7.5rem;

g-31

gap: 7.75rem;

g-32

gap: 8rem;

g-33

gap: 8.25rem;

g-34

gap: 8.5rem;

g-35

gap: 8.75rem;

g-36

gap: 9rem;

g-37

gap: 9.25rem;

g-38

gap: 9.5rem;

g-39

gap: 9.75rem;

g-40

gap: 10rem;

g-41

gap: 10.25rem;

g-42

gap: 10.5rem;

g-43

gap: 10.75rem;

g-44

gap: 11rem;

g-45

gap: 11.25rem;

g-46

gap: 11.5rem;

g-47

gap: 11.75rem;

g-48

gap: 12rem;

g-49

gap: 12.25rem;

g-50

gap: 12.5rem;

g-51

gap: 12.75rem;

g-52

gap: 13rem;

g-53

gap: 13.25rem;

g-54

gap: 13.5rem;

g-55

gap: 13.75rem;

g-56

gap: 14rem;

g-57

gap: 14.25rem;

g-58

gap: 14.5rem;

g-59

gap: 14.75rem;

g-60

gap: 15rem;

g-61

gap: 15.25rem;

g-62

gap: 15.5rem;

g-63

gap: 15.75rem;

g-64

gap: 16rem;

g-65

gap: 16.25rem;

g-66

gap: 16.5rem;

g-67

gap: 16.75rem;

g-68

gap: 17rem;

g-69

gap: 17.25rem;

g-70

gap: 17.5rem;

g-71

gap: 17.75rem;

g-72

gap: 18rem;

g-73

gap: 18.25rem;

g-74

gap: 18.5rem;

g-75

gap: 18.75rem;

g-76

gap: 19rem;

g-77

gap: 19.25rem;

g-78

gap: 19.5rem;

g-79

gap: 19.75rem;

g-80

gap: 20rem;

g-81

gap: 20.25rem;

g-82

gap: 20.5rem;

g-83

gap: 20.75rem;

g-84

gap: 21rem;

g-85

gap: 21.25rem;

g-86

gap: 21.5rem;

g-87

gap: 21.75rem;

g-88

gap: 22rem;

g-89

gap: 22.25rem;

g-90

gap: 22.5rem;

g-91

gap: 22.75rem;

g-92

gap: 23rem;

g-93

gap: 23.25rem;

g-94

gap: 23.5rem;

g-95

gap: 23.75rem;

g-96

gap: 24rem;

g-97

gap: 24.25rem;

g-98

gap: 24.5rem;

g-99

gap: 24.75rem;

g-100

gap: 25rem;

This example sets the gap to 2.5rem. The element will have uniform spacing of 2.5rem between its rows and columns.

A
B
C
D
E
<div class="g-10 d-g gtc-3 stripes tc-white">
<div class="ai-c bg-indigo d-f jc-c p-4 rad-1">A</div>
<div class="ai-c bg-indigo d-f jc-c p-4 rad-1">B</div>
<div class="ai-c bg-indigo d-f jc-c p-4 rad-1">C</div>
<div class="ai-c bg-indigo d-f jc-c p-4 rad-1">D</div>
<div class="ai-c bg-indigo d-f jc-c p-4 rad-1">E</div>
</div>

Conditional styles

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Media modifiers

You can combine responsive breakpoints like sm:g-*,md:g-*, lg:g-*, and xxl:g-* allows targeting specific utilities in different viewports.

<div class="g-1 md:g-2 ..."></div>
Hover modifiers

Alternatively, you can apply :hover by using h:g-* utility to override elements and change their values when hovering over them.

<div class="g-1 h:g-2 ..."></div>