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 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.
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>
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>