@radix-ui/themes/src/styles/utilities/grid-template-columns.css

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

@breakpoints {
  .rt-r-gtc {
    /* Keep this selector here to maintain the source order */
  }
  .rt-r-gtc-1 {
    grid-template-columns: minmax(0, 1fr);
  }
  .rt-r-gtc-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rt-r-gtc-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .rt-r-gtc-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .rt-r-gtc-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .rt-r-gtc-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .rt-r-gtc-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .rt-r-gtc-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .rt-r-gtc-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
}

.rt-r-gtc {
  grid-template-columns: var(--grid-template-columns);
}
@media (--xs) {
  .xs\:rt-r-gtc {
    grid-template-columns: var(--grid-template-columns-xs);
  }
}
@media (--sm) {
  .sm\:rt-r-gtc {
    grid-template-columns: var(--grid-template-columns-sm);
  }
}
@media (--md) {
  .md\:rt-r-gtc {
    grid-template-columns: var(--grid-template-columns-md);
  }
}
@media (--lg) {
  .lg\:rt-r-gtc {
    grid-template-columns: var(--grid-template-columns-lg);
  }
}
@media (--xl) {
  .xl\:rt-r-gtc {
    grid-template-columns: var(--grid-template-columns-xl);
  }
}