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.
<div class="rg-10 d-g gtr-3 tc-white" id="area"> <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 modifier
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 modifier
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>