Grid & Layout
A consistent grid keeps components aligned and spacing predictable across every screen size. Kalki Design uses a column-based grid with configurable gutters and margins — desktop gets 12 columns, tablet 9, and mobile 4.
Responsive Grid
Use the interactive preview below to explore how columns, gutters, and margins behave across viewports.
Grid Patterns
These are the recommended column span patterns for common UI structures. All examples assume a 12-column desktop grid.
Full Width — 12 col
Page headers, data tables, full-width banners.
Main + Sidebar — 8 + 4 col
Dashboard pages, detail views with contextual info panels.
Two Equal Columns — 6 + 6 col
Comparison views, split forms, two-up card layouts.
Three Equal Columns — 4 + 4 + 4 col
Metric cards, feature grids, KPI rows.
Mixed — 8 + 4 top, 4 + 4 + 4 bottom
Dashboard overview pages combining a chart with a stats row.
Do's & Don'ts
Do
- Align components to column boundaries — never place content between columns.
- Use consistent gutters across the same page — don't mix 16px and 24px in one layout.
- Let content collapse to fewer columns on smaller screens — 8+4 on desktop becomes 12 on mobile.
- Use fluid margins on desktop. Switch to fixed margins on tablet and mobile.
- Span
CardandTableto even column counts (4, 6, 8, 12).
Don't
- Use arbitrary widths like
w-[340px]— always express width as column spans. - Nest grids more than two levels deep — it creates misalignment that's hard to debug.
- Use a sidebar pattern on mobile — collapse to a single full-width column instead.
- Override gutter spacing inside a component — gutters are a layout concern, not a component concern.
- Mix
gap-*values and manual margins to fake gutters — use the grid'scolumnGaponly.