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 is a lightweight CSS library that makes building responsive layouts fast and expressive. Drop in a single stylesheet, apply a handful of classes to your HTML, and get full control over grids, gaps, positioning, and page structure — all powered by Flexbox.

Installation

Get Tidgrid running in your project in under a minute via CDN or npm.

Rows & Cells

Learn the core grid primitives: rows, cells, and display modes.

Spans & Fractions

Size cells using 12- or 16-column spans and fractional widths.

Class Reference

Browse every utility class Tidgrid generates, with values and breakpoints.

​
Why Tidgrid?

Tidgrid takes a functional, utility-first approach to CSS layouts. Every class is purposeful and maps directly to a Flexbox property or layout concept — so you always know what a class does just by reading it.

Expressive Syntax

Classes use a readable parenthesis style: tg-mode(auto), tg-gap(md), tg-pos(center).

Responsive by Default

Every utility generates responsive variants automatically: sm:tg-mode(stacked), lg:tg-gap(xl).

Zero Dependencies

A single CSS file, under 15 KB of SCSS source. No JavaScript, no runtime, no framework lock-in.

​
Get started in 3 steps

1

Add Tidgrid to your page

Include the hosted stylesheet via CDN — no npm or build step needed to get started.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sneikki/tidgrid@v0.1.0-alpha.2/build/tidgrid.min.css">
2

Build a responsive layout

Wrap your content in a .tg-row and size each .tg-cell with a span or fraction class.
<div class="tg-row tg-gap(md)">
  <div class="tg-cell tg-frac(1/2)">Left column</div>
  <div class="tg-cell tg-frac(1/2)">Right column</div>
</div>
3

Add responsive breakpoints

Prefix any class with a breakpoint to override it at that screen size. Stack columns on mobile, place them side-by-side on desktop.
<div class="tg-row tg-mode(stacked) md:tg-mode(auto) tg-gap(md)">
  <div class="tg-cell">First</div>
  <div class="tg-cell">Second</div>
  <div class="tg-cell">Third</div>
</div>
Tidgrid is currently in early alpha (v0.1.0-alpha.2). The API may change between releases. If you find a bug or have a suggestion, open an issue on GitHub.

Build docs developers (and LLMs) love

Get started for freeTalk to us