Grid
Calculate column widths for any grid system. Runs in your browser — no server call, no tracking.
Settings
Presets
Result
3 col: — · 4 col: —
6 col: —
Grid Types & Meshes
Columnar: Traditional layout grid (newspaper, web). Modular: Columns + rows creating cells. Hierarchical: Organic, content-driven placement. Triangle mesh: Structural tessellation for 3D and generative art. Polygon repetition: Hexagonal, octagonal tiling patterns used in architecture and surface design.
2D, Perspective & 3D Grids
2D grids: Flat layouts for print and screen. Perspective grids: Vanishing-point based for architectural rendering and illustration. 3D grids: Voxel and spatial grids for modeling environments. Isometric grids bridge 2D representation of 3D space — common in game design, technical illustration, and infographics.
Design System Spacing
Modern design systems use 4px or 8px base units. Padding: Internal breathing room. Margin: External separation. Gap: Space between siblings. Each system has a spacing philosophy — Material Design uses 8dp increments, Apple HIG uses optical balance. Generous padding conveys luxury, tight spacing signals density and urgency.
Visible & Hidden Grids
Visible grids: Explicitly shown lines and divisions (tables, dashboards, technical drawings). Hidden grids: Underlying structure that guides alignment without being seen. Golden ratio grids: Invisible proportional guides based on φ (1.618). Deconstruction: Deliberately breaking the grid for emphasis — powerful only when the underlying order is understood.