layout · sizing · responsive
Measure, split and snap your layouts to a grid
Six precise little tools for frontend developers and designers. No accounts, no uploads — everything runs in your browser and keeps working offline.
01
Screen Splitter
Split a screen into rows and columns, drag the dividers, read exact px and % sizes, and export the layout as ready-to-paste CSS grid code.
Open02
px / rem / em
Convert between px, rem and em with configurable root and parent font sizes, plus a copy-ready reference table of common values.
Open03
Breakpoints
See your live viewport width, compare it against Tailwind, Bootstrap and Material breakpoints, and test any width with a draggable preview strip.
Open04
Aspect Ratio
Enter any two of width, height or ratio to get the third. Presets for 16:9, 4:3, 21:9, 1:1 and 9:16 with live preview and CSS snippets.
Open05
Grid Generator
Build CSS Grid layouts visually: tracks in fr, px, % or minmax, gaps, and drag-to-paint named areas. Copy the generated CSS and HTML.
Open06
Flexbox Playground
Experiment with flex-direction, wrap, justify-content, alignment, gaps and per-item grow/shrink/basis on live boxes, then copy the CSS.
Open100% offline, 0 bytes uploaded
GridSnap is a static site with a service worker: after your first visit it loads instantly and works without a network connection. Nothing you type, measure or generate ever leaves your device.