GridChive is an advanced yet minimal grid system generator built for designers and front-end developers.
It allows users to visualize, customize, and export various types of design grids such as Golden Ratio, Modular, Swiss, Fibonacci, and more.
- Multiple Grid Systems: Golden Ratio, Column, Modular, Fibonacci, Swiss, and others.
- Real-Time Customization: Adjust columns, rows, margins, gutters, opacity, and colors.
- Quick Variations: Generate random grid presets for creative inspiration.
- Responsive UI: Works seamlessly on desktop and mobile devices.
- Export Options: Export your grids as PNG or SVG.
- Clipboard & Config Save: Copy grids directly or save JSON configurations.
- HTML5
- CSS3 (Custom Design System)
- Vanilla JavaScript (Canvas-based Rendering)
- Open
v24.htmlin your browser. - Choose a grid type from the sidebar.
- Customize parameters like width, height, columns, and color.
- Click Generate Grid.
- Export the grid as PNG or SVG, or copy it to the clipboard.
- Golden Ratio: Uses the mathematical ratio (Ο = 1.618) for natural balance.
- Modular Grid: Divides the canvas into consistent modules.
- Swiss Grid: Inspired by Swiss design principles.
- Manuscript Grid: Ideal for editorial layouts.
- Baseline Grid: Focused on text alignment and rhythm.
- PNG: Raster format for presentations or web use.
- SVG: Scalable vector format for design tools.
- Light/Dark mode toggle
- Advanced export presets
- Layout saving and sharing options
This project is released under the MIT License β free for personal and commercial use with attribution.
Narmesh Kumar Sah
Front-End Designer & Developer
LinkedIn β’ GitHub β’ Peerlist