Documentation Index
Fetch the complete documentation index at: https://mintlify.com/sneikki/tidgrid/llms.txt
Use this file to discover all available pages before exploring further.
Cell classes define how individual items behave inside a .tg-row flex container. By default, .tg-cell stacks to full width, but a rich set of mode, order, fraction, and span variants lets you precisely override sizing and ordering per-cell — independent of what the parent row specifies.
Base Class
The .tg-cell class defaults to stacked (full-width) layout and includes box-sizing: border-box so padding never breaks widths.
| Class | CSS Output |
|---|
.tg-cell | flex: none; width: 100%; box-sizing: border-box |
<div class="tg-row">
<div class="tg-cell">I am full width by default</div>
</div>
Mode Variants
Mode variants on a cell override the sizing set by the parent row’s mode class for that specific cell only. This makes it straightforward to have one cell behave differently from its siblings.
| Class | CSS Output |
|---|
.tg-mode(auto) | display: block; flex: 1 0 0; width: unset |
.tg-mode(stacked) | display: block; flex: none; width: 100% |
.tg-mode(thin) | display: block; flex: 0 1 0; width: unset; white-space: nowrap |
.tg-mode(fill) | display: block; flex: 1 0 0; width: unset |
.tg-mode(disabled) | display: none |
auto
stacked
thin
fill
disabled
The cell grows to claim its share of remaining row space.<div class="tg-row tg-mode(thin)">
<div class="tg-cell">Label</div>
<!-- This cell overrides thin mode and grows to fill remaining space -->
<div class="tg-cell tg-mode(auto)">Expanding input area</div>
</div>
The cell resets to full-width stacked behaviour, even inside an auto or thin row.<div class="tg-row tg-mode(auto)">
<div class="tg-cell">Grows</div>
<!-- Forces this cell to be full width -->
<div class="tg-cell tg-mode(stacked)">Always full width</div>
</div>
The cell shrinks to its content width and suppresses text wrapping.<div class="tg-row tg-mode(auto)">
<div class="tg-cell">Grows to fill</div>
<div class="tg-cell tg-mode(thin)">Fixed label</div>
</div>
Identical behaviour to auto — the cell grows to fill available space.<div class="tg-row">
<div class="tg-cell tg-mode(fill)">Fills remaining width</div>
<div class="tg-cell tg-mode(thin)">Sidebar</div>
</div>
Hides the cell entirely with display: none.<div class="tg-row tg-mode(auto)">
<div class="tg-cell">Visible</div>
<div class="tg-cell tg-mode(disabled)">Hidden</div>
</div>
Order Variants
Order variants shift a cell’s visual position within the flex row without changing the DOM order. This is useful for accessibility or server-rendered content that must appear in a different sequence on screen.
| Class | CSS Output | Effect |
|---|
.tg-order(first) | order: -2 | Cell appears before all default-order siblings |
.tg-order(last) | order: 2 | Cell appears after all default-order siblings |
.tg-order(none) | order: unset | Resets to natural DOM order |
<div class="tg-row tg-mode(auto)">
<div class="tg-cell">Middle (DOM first)</div>
<div class="tg-cell tg-order(first)">Visually first</div>
<div class="tg-cell tg-order(last)">Visually last</div>
</div>
Combine tg-order(first) and tg-order(last) with responsive prefixes to reorder cells differently at each breakpoint — for example, moving a sidebar below the main content on mobile.
Fraction Variants
Fraction variants set a fixed width on an individual cell, overriding any width set by the parent row. Use these to mix column sizes inside a single row.
| Class | CSS Output |
|---|
.tg-frac(1/2) | width: 50%; flex: none |
.tg-frac(1/3) | width: 33.333%; flex: none |
.tg-frac(1/4) | width: 25%; flex: none |
.tg-frac(2/3) | width: 66.666%; flex: none |
<!-- A sidebar + main content layout using fractions -->
<div class="tg-row">
<div class="tg-cell tg-frac(1/3)">Sidebar</div>
<div class="tg-cell tg-frac(2/3)">Main content</div>
</div>
Span Variants
Span variants size a cell as a precise number of columns. The correct percentage is computed from the grid size declared on a .tg-size(12) or .tg-size(16) ancestor, but the class is placed directly on the .tg-cell.
12-Column Spans
| Class | CSS Output |
|---|
.tg-span(1) | width: 8.333%; flex: none |
.tg-span(2) | width: 16.667%; flex: none |
.tg-span(3) | width: 25%; flex: none |
.tg-span(4) | width: 33.333%; flex: none |
.tg-span(5) | width: 41.667%; flex: none |
.tg-span(6) | width: 50%; flex: none |
.tg-span(7) | width: 58.333%; flex: none |
.tg-span(8) | width: 66.666%; flex: none |
.tg-span(9) | width: 75%; flex: none |
.tg-span(10) | width: 83.333%; flex: none |
.tg-span(11) | width: 91.667%; flex: none |
.tg-span(12) | width: 100%; flex: none |
<div class="tg-size(12)">
<div class="tg-row">
<div class="tg-cell tg-span(8)">Main (8 cols)</div>
<div class="tg-cell tg-span(4)">Sidebar (4 cols)</div>
</div>
</div>
16-Column Spans
| Class | CSS Output |
|---|
.tg-span(1) | width: 6.25%; flex: none |
.tg-span(2) | width: 12.5%; flex: none |
.tg-span(4) | width: 25%; flex: none |
.tg-span(6) | width: 37.5%; flex: none |
.tg-span(8) | width: 50%; flex: none |
.tg-span(10) | width: 62.5%; flex: none |
.tg-span(12) | width: 75%; flex: none |
.tg-span(14) | width: 87.5%; flex: none |
.tg-span(16) | width: 100%; flex: none |
<div class="tg-size(16)">
<div class="tg-row">
<div class="tg-cell tg-span(4)">4/16 wide</div>
<div class="tg-cell tg-span(8)">8/16 wide</div>
<div class="tg-cell tg-span(4)">4/16 wide</div>
</div>
</div>
When both a row-level .tg-span(N) and a cell-level .tg-span(N) are present, the cell-level class wins because it is scoped directly to the cell element.
Responsive Variants
All cell variant classes support breakpoint prefixes for mobile-first responsive control.
| Breakpoint | Prefix | Min-Width |
|---|
| Extra small | xs: | 36em (576px) |
| Small | sm: | 48em (768px) |
| Medium | md: | 64em (1024px) |
| Large | lg: | 75em (1200px) |
| Extra large | xl: | 90em (1440px) |
<!-- Full width on mobile, half width at sm, one-third at lg -->
<div class="tg-row">
<div class="tg-cell sm:tg-frac(1/2) lg:tg-frac(1/3)">
Responsive cell
</div>
</div>
<!-- Cell hidden on small screens, visible at md and above -->
<div class="tg-row tg-mode(auto)">
<div class="tg-cell tg-mode(disabled) md:tg-mode(auto)">
Hidden on mobile
</div>
<div class="tg-cell">Always visible</div>
</div>
