Zanari
HomeWorkspaceExploreContact

Grid Generator

Build responsive grid layouts with adjustable columns, rows, and gaps.

Grid settings

Define grid
structure

Adjust the grid structure, then tune each item’s placement and span.

12 columns · 6 rows · 16x16px gap

Quick layouts

Items

Place each grid cell

Drag items on the canvas and resize with the handle.

1
2
3

Preview

Canvas

Screen size

Set the viewport dimensions for your grid layout.

Toggle responsive container mode
Toggle between manual and automatic gap filling
Scale grid to fit viewport
Change zoom level

25% Scale View (4 canvas px = 1 screen px)

1
2
3

Export

Generated code

Copy this code to implement the grid layout in your project.

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 16px;
}

.1 { grid-column: 1 / span 8; grid-row: 1 / span 4; }
.2 { grid-column: 9 / span 4; grid-row: 1 / span 6; }
.3 { grid-column: 1 / span 8; grid-row: 5 / span 2; }
UI
Zanari

Toolkit for contrast, typography, and layout tools built for real UI work.

Manage pinned tools

Tools

  • GIF Editor
  • Grid Generator
  • Color Contrast Checker
  • Ratio Calculator
  • Unit Converter
  • Google Font Explorer
  • Placeholder Generator
  • Type Scale
  • SVG Wave Generator
  • Font FinderComing soon
  • Image UpscalerComing soon
  • Gradient ColorComing soon
  • Background PatternComing soon

Platform

  • UI Design Tools Overview
  • Explore All Tools
  • Learn Design Systems
  • Product Changelog
  • Account Settings

Resources

  • Accessible Icons
  • UI Inspiration
  • Typography Rules
  • WCAG Accessibility
  • Design Tool Guides

© 2026 Zanari. Built for accessible interface work.

v1.5.23 · Early accessFreemium
TermsPrivacyContact
Preferences and pinned tools stay in your browser.