Skip to content

Row Gap

Controls the gap between rows in a grid layout.

Utility Properties

rg-0

row-gap: 0rem;

rg-1

row-gap: 0.25rem;

rg-2

row-gap: 0.5rem;

rg-3

row-gap: 0.75rem;

rg-4

row-gap: 1rem;

rg-5

row-gap: 1.25rem;

rg-6

row-gap: 1.5rem;

rg-7

row-gap: 1.75rem;

rg-8

row-gap: 2rem;

rg-9

row-gap: 2.25rem;

rg-10

row-gap: 2.5rem;

rg-11

row-gap: 2.75rem;

rg-12

row-gap: 3rem;

rg-13

row-gap: 3.25rem;

rg-14

row-gap: 3.5rem;

rg-15

row-gap: 3.75rem;

rg-16

row-gap: 4rem;

rg-17

row-gap: 4.25rem;

rg-18

row-gap: 4.5rem;

rg-19

row-gap: 4.75rem;

rg-20

row-gap: 5rem;

rg-21

row-gap: 5.25rem;

rg-22

row-gap: 5.5rem;

rg-23

row-gap: 5.75rem;

rg-24

row-gap: 6rem;

rg-25

row-gap: 6.25rem;

rg-26

row-gap: 6.5rem;

rg-27

row-gap: 6.75rem;

rg-28

row-gap: 7rem;

rg-29

row-gap: 7.25rem;

rg-30

row-gap: 7.5rem;

rg-31

row-gap: 7.75rem;

rg-32

row-gap: 8rem;

rg-33

row-gap: 8.25rem;

rg-34

row-gap: 8.5rem;

rg-35

row-gap: 8.75rem;

rg-36

row-gap: 9rem;

rg-37

row-gap: 9.25rem;

rg-38

row-gap: 9.5rem;

rg-39

row-gap: 9.75rem;

rg-40

row-gap: 10rem;

rg-41

row-gap: 10.25rem;

rg-42

row-gap: 10.5rem;

rg-43

row-gap: 10.75rem;

rg-44

row-gap: 11rem;

rg-45

row-gap: 11.25rem;

rg-46

row-gap: 11.5rem;

rg-47

row-gap: 11.75rem;

rg-48

row-gap: 12rem;

rg-49

row-gap: 12.25rem;

rg-50

row-gap: 12.5rem;

rg-51

row-gap: 12.75rem;

rg-52

row-gap: 13rem;

rg-53

row-gap: 13.25rem;

rg-54

row-gap: 13.5rem;

rg-55

row-gap: 13.75rem;

rg-56

row-gap: 14rem;

rg-57

row-gap: 14.25rem;

rg-58

row-gap: 14.5rem;

rg-59

row-gap: 14.75rem;

rg-60

row-gap: 15rem;

rg-61

row-gap: 15.25rem;

rg-62

row-gap: 15.5rem;

rg-63

row-gap: 15.75rem;

rg-64

row-gap: 16rem;

rg-65

row-gap: 16.25rem;

rg-66

row-gap: 16.5rem;

rg-67

row-gap: 16.75rem;

rg-68

row-gap: 17rem;

rg-69

row-gap: 17.25rem;

rg-70

row-gap: 17.5rem;

rg-71

row-gap: 17.75rem;

rg-72

row-gap: 18rem;

rg-73

row-gap: 18.25rem;

rg-74

row-gap: 18.5rem;

rg-75

row-gap: 18.75rem;

rg-76

row-gap: 19rem;

rg-77

row-gap: 19.25rem;

rg-78

row-gap: 19.5rem;

rg-79

row-gap: 19.75rem;

rg-80

row-gap: 20rem;

rg-81

row-gap: 20.25rem;

rg-82

row-gap: 20.5rem;

rg-83

row-gap: 20.75rem;

rg-84

row-gap: 21rem;

rg-85

row-gap: 21.25rem;

rg-86

row-gap: 21.5rem;

rg-87

row-gap: 21.75rem;

rg-88

row-gap: 22rem;

rg-89

row-gap: 22.25rem;

rg-90

row-gap: 22.5rem;

rg-91

row-gap: 22.75rem;

rg-92

row-gap: 23rem;

rg-93

row-gap: 23.25rem;

rg-94

row-gap: 23.5rem;

rg-95

row-gap: 23.75rem;

rg-96

row-gap: 24rem;

rg-97

row-gap: 24.25rem;

rg-98

row-gap: 24.5rem;

rg-99

row-gap: 24.75rem;

rg-100

row-gap: 25rem;

This example sets the row gap to 0.75rem. The element will have a uniform spacing of 0.75rem between its rows.

A
B
C
<div class="rg-10 d-g gtr-3 stripes tc-white">
<div class="bg-indigo p-4 rad-1 ta-c">A</div>
<div class="bg-indigo p-4 rad-1 ta-c">B</div>
<div class="bg-indigo p-4 rad-1 ta-c">C</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:rg-*,md:rg-*, lg:rg-*, and xxl:rg-* allows targeting specific utilities in different viewports.

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

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

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