Classic Grid
Calculate exact column dimensions
Parameters
Preview
Presets
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. The symbolic meaning of space varies: 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, rebellion, or artistic expression — powerful only when the underlying order is understood.