Skip to main content

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.

Tidgrid gives you two complementary approaches to controlling how wide each cell is. Fractions are the simplest path — snap a cell to one-half, one-third, one-quarter, or two-thirds of the row in a single class. Spans unlock a full column grid where you declare explicit column counts, giving you the fine-grained control of a traditional 12- or 16-column layout without any external grid framework.

​
Fractional Sizing with tg-frac

Fractions set a cell’s flex-basis to a fixed percentage. You can apply tg-frac either on the .tg-row (which sets that width for all child cells) or on an individual .tg-cell (which overrides the width for that cell only). Available fractions:
ClassCell width
tg-frac(1/2)50%
tg-frac(1/3)33.333…%
tg-frac(1/4)25%
tg-frac(2/3)66.666…%

​
Row-level fractions

Applying tg-frac on the row sets every direct .tg-cell child to that width. Cells that exceed the row width wrap naturally thanks to flex-wrap: wrap.
html
<!-- Four equal-width columns -->
<div class="tg-row tg-frac(1/4)">
  <div class="tg-cell">Alpha</div>
  <div class="tg-cell">Beta</div>
  <div class="tg-cell">Gamma</div>
  <div class="tg-cell">Delta</div>
</div>
html
<!-- Three equal-width columns, wraps after every third cell -->
<div class="tg-row tg-frac(1/3)">
  <div class="tg-cell">One</div>
  <div class="tg-cell">Two</div>
  <div class="tg-cell">Three</div>
  <div class="tg-cell">Four — wraps to next line</div>
</div>

​
Cell-level fractions

Apply tg-frac directly on .tg-cell to size that cell independently from its siblings.
html
<!-- Sidebar + main content layout using fractions on individual cells -->
<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>
Fractions are ideal for simple, symmetric layouts. When you need asymmetric column arrangements that don’t map cleanly to halves, thirds, or quarters, reach for the span system instead.

​
Span-Based Sizing

The span system gives you a traditional column grid. Wrap your layout in a .tg-size(12) or .tg-size(16) container, then use tg-span(N) on rows or cells to declare how many columns they should occupy.

​
Setting up the grid context

The .tg-size(N) class is a context wrapper — it activates the column system for everything inside it. The class itself applies no visual styles; it simply enables tg-span classes with the correct column math.
html
<div class="tg-size(12)">
  <!-- tg-span classes now work in 12-column units here -->
</div>

​
The 12-column grid

Inside .tg-size(12), tg-span(N) sets cell width to (N / 12) × 100%. Use it on the row to set all cells to the same span, or on individual cells for mixed-width layouts. 
<!-- Every cell is 4 columns wide (one-third of 12) -->
<div class="tg-size(12)">
  <div class="tg-row tg-span(4)">
    <div class="tg-cell">Four cols</div>
    <div class="tg-cell">Four cols</div>
    <div class="tg-cell">Four cols</div>
  </div>
</div>

​
The 16-column grid

The 16-column grid works identically, but with .tg-size(16) and tg-span(N) values from 1 to 16. Each column unit is 6.25% of the row width.
html
<!-- 4-column layout in a 16-col grid (each cell = 4/16 = 25%) -->
<div class="tg-size(16)">
  <div class="tg-row tg-span(4)">
    <div class="tg-cell">Quarter</div>
    <div class="tg-cell">Quarter</div>
    <div class="tg-cell">Quarter</div>
    <div class="tg-cell">Quarter</div>
  </div>
</div>
The 16-column grid is useful when you need columns that don’t divide evenly in a 12-column system — for example, 5-column layouts (each cell tg-span(3) out of 16 ≈ 18.75%) or precise 1/16 increments for design-system grids.
html
<!-- Asymmetric 16-col layout: 5-col sidebar + 11-col content -->
<div class="tg-size(16)">
  <div class="tg-row">
    <div class="tg-cell tg-span(5)">Narrow sidebar</div>
    <div class="tg-cell tg-span(11)">Wide content area</div>
  </div>
</div>

​
Fractions vs. Spans

Use tg-frac when…

  • You need simple halves, thirds, quarters, or two-thirds
  • You want the smallest possible amount of markup
  • The layout doesn’t require a precise column count
  • You’re building content-driven layouts like card grids or split panels

Use tg-span when…

  • You need precise column widths that don’t fit 1/2, 1/3, 1/4, or 2/3
  • You’re implementing a design system with a defined column grid
  • You need mixed-width rows where cells span different column counts
  • You want 16-column precision for finer layout increments

​
Responsive Spans and Fractions

Both tg-frac and tg-span support all five responsive breakpoint prefixes. Stack multiple breakpoint classes to build layouts that reflow at each screen size.
html
<!-- Mobile: full width (default stacked) → sm: half width → lg: one-quarter -->
<div class="tg-row">
  <div class="tg-cell sm:tg-frac(1/2) lg:tg-frac(1/4)">Card A</div>
  <div class="tg-cell sm:tg-frac(1/2) lg:tg-frac(1/4)">Card B</div>
  <div class="tg-cell sm:tg-frac(1/2) lg:tg-frac(1/4)">Card C</div>
  <div class="tg-cell sm:tg-frac(1/2) lg:tg-frac(1/4)">Card D</div>
</div>
html
<!-- Span-based responsive layout inside a 12-col grid -->
<div class="tg-size(12)">
  <div class="tg-row">
    <!-- Stacked on mobile, sidebar layout at md+ -->
    <div class="tg-cell tg-span(12) md:tg-span(3)">Sidebar</div>
    <div class="tg-cell tg-span(12) md:tg-span(9)">Content</div>
  </div>
</div>
tg-frac(1/1) does not exist. The available fractions are 1/2, 1/3, 1/4, and 2/3 only. For full-width cells, rely on the default stacked behaviour (no frac class needed) or apply tg-mode(stacked) explicitly.

Build docs developers (and LLMs) love

Get started for freeTalk to us