Variants provide responsivity in Tidgrid. Almost all grid modifiers are varying, which means that they can declared to be active only for certain viewport sizes. Varying modifiers can be prepended with breakpoints. Then, that modifier becomes active only when the viewport is wide enough to trigger the breakpoint. For example, md:tg-mode(auto) sets the auto mode, but only if viewport width is at least 64em.

Breakpoints allow repeating the same modifier for a single element. As long as the breakpoints are different, an element could have class name such as tg-mode(auto) sm:tg-mode(stacked) xl:tg-mode(thin). Auto mode applies when viewport is narrower than the sm breakpoint, stacked mode until viewport width hits the xl breakpoint, and finally thin mode applies for viewports that trigger the xl breakpoint.

Tidgrid provides the following set of breakpoints by default:

• xs: 36em
• sm: 48em
• md: 64em
• lg: 75em
• xl: 90em