@radix-ui/themes/src/styles/utilities/gap.css

[](https://radix-ui.com/themes)

@breakpoints {
  .rt-r-gap {
    /* Keep this selector here to maintain the source order */
  }
  .rt-r-gap-0 {
    gap: 0;
  }
  .rt-r-gap-1 {
    gap: var(--space-1);
  }
  .rt-r-gap-2 {
    gap: var(--space-2);
  }
  .rt-r-gap-3 {
    gap: var(--space-3);
  }
  .rt-r-gap-4 {
    gap: var(--space-4);
  }
  .rt-r-gap-5 {
    gap: var(--space-5);
  }
  .rt-r-gap-6 {
    gap: var(--space-6);
  }
  .rt-r-gap-7 {
    gap: var(--space-7);
  }
  .rt-r-gap-8 {
    gap: var(--space-8);
  }
  .rt-r-gap-9 {
    gap: var(--space-9);
  }
  .rt-r-cg {
    /* Keep this selector here to maintain the source order */
  }
  .rt-r-cg-0 {
    column-gap: 0;
  }
  .rt-r-cg-1 {
    column-gap: var(--space-1);
  }
  .rt-r-cg-2 {
    column-gap: var(--space-2);
  }
  .rt-r-cg-3 {
    column-gap: var(--space-3);
  }
  .rt-r-cg-4 {
    column-gap: var(--space-4);
  }
  .rt-r-cg-5 {
    column-gap: var(--space-5);
  }
  .rt-r-cg-6 {
    column-gap: var(--space-6);
  }
  .rt-r-cg-7 {
    column-gap: var(--space-7);
  }
  .rt-r-cg-8 {
    column-gap: var(--space-8);
  }
  .rt-r-cg-9 {
    column-gap: var(--space-9);
  }
  .rt-r-rg {
    /* Keep this selector here to maintain the source order */
  }
  .rt-r-rg-0 {
    row-gap: 0;
  }
  .rt-r-rg-1 {
    row-gap: var(--space-1);
  }
  .rt-r-rg-2 {
    row-gap: var(--space-2);
  }
  .rt-r-rg-3 {
    row-gap: var(--space-3);
  }
  .rt-r-rg-4 {
    row-gap: var(--space-4);
  }
  .rt-r-rg-5 {
    row-gap: var(--space-5);
  }
  .rt-r-rg-6 {
    row-gap: var(--space-6);
  }
  .rt-r-rg-7 {
    row-gap: var(--space-7);
  }
  .rt-r-rg-8 {
    row-gap: var(--space-8);
  }
  .rt-r-rg-9 {
    row-gap: var(--space-9);
  }
}

.rt-r-gap {
  gap: var(--gap);
}
.rt-r-cg {
  column-gap: var(--column-gap);
}
.rt-r-rg {
  row-gap: var(--row-gap);
}
@media (--xs) {
  .xs\:rt-r-gap {
    gap: var(--gap-xs);
  }
  .xs\:rt-r-cg {
    column-gap: var(--column-gap-xs);
  }
  .xs\:rt-r-rg {
    row-gap: var(--row-gap-xs);
  }
}
@media (--sm) {
  .sm\:rt-r-gap {
    gap: var(--gap-sm);
  }
  .sm\:rt-r-cg {
    column-gap: var(--column-gap-sm);
  }
  .sm\:rt-r-rg {
    row-gap: var(--row-gap-sm);
  }
}
@media (--md) {
  .md\:rt-r-gap {
    gap: var(--gap-md);
  }
  .md\:rt-r-cg {
    column-gap: var(--column-gap-md);
  }
  .md\:rt-r-rg {
    row-gap: var(--row-gap-md);
  }
}
@media (--lg) {
  .lg\:rt-r-gap {
    gap: var(--gap-lg);
  }
  .lg\:rt-r-cg {
    column-gap: var(--column-gap-lg);
  }
  .lg\:rt-r-rg {
    row-gap: var(--row-gap-lg);
  }
}
@media (--xl) {
  .xl\:rt-r-gap {
    gap: var(--gap-xl);
  }
  .xl\:rt-r-cg {
    column-gap: var(--column-gap-xl);
  }
  .xl\:rt-r-rg {
    row-gap: var(--row-gap-xl);
  }
}