Define the column structure, spacing, and responsive grid behavior for building consistent layouts in the Tendoo Design System.

Grid

The grid system is the foundation of Tendoo’s layout structure. It helps organize content, align elements, and create a consistent rhythm across screens. Built on a flexible column-based structure, the grid supports both fixed and fluid layouts that respond across breakpoints.

Grid Principles

Consistency — Use a uniform column structure and gutter spacing.
Responsiveness — The grid adapts across screen sizes using defined breakpoints.
Alignment — Grid ensures consistent alignment of UI elements and containers.
Modularity — Grid columns can be combined and nested to form flexible layouts.

Default Grid System

Tendoo uses a 12-column grid system by default, with customizable gutters and column widths.

Token	Value	Description
`grid.columns`	`12`	Total number of columns
`grid.gutter`	`24px`	Space between columns
`grid.margin`	`16px`	Default outer margin for containers
`grid.container.max`	`1280px`	Max width of the grid container

// grid.tokens.ts
export const grid = {
  columns: 12,
  gutter: "24px",
  margin: "16px",
  container: {
    max: "1280px",
  },
};

Responsive Behavior

Grid layouts scale across breakpoints using flex or CSS grid utilities.

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-12 gap-gutter">
  <div className="col-span-6">Left Content</div>
  <div className="col-span-6">Right Content</div>
</div>

💡 Use predefined grid-cols, col-span, and gap-* classes or utilities powered by tokens.

Breakpoint Example

Screen Size	Columns	Token	Usage
Mobile	4	`grid.sm`	Compact layouts
Tablet	8	`grid.md`	Moderate layout flexibility
Desktop	12	`grid.lg`	Full layout structure

Nesting & Custom Grids

Grids can be nested to support more complex layouts:

<div className="grid grid-cols-12 gap-gutter">
  <div className="col-span-8">
    <div className="grid grid-cols-4 gap-gutter">
      <div className="col-span-2">Nested Left</div>
      <div className="col-span-2">Nested Right</div>
    </div>
  </div>
  <div className="col-span-4">Sidebar</div>
</div>

Visual Rhythm

Grid spacing should align with the overall Spacing and Layout tokens to maintain consistent vertical and horizontal rhythm.

A strong grid system ensures that content flows predictably, aligns correctly, and adapts responsively — forming the backbone of every scalable Tendoo interface.

Grid

On this page