Grid Calculator by HSArticle

Calculate column widths, gutters & margins instantly

6 followers

Calculate column widths, gutters & margins instantly

6 followers

Free online grid calculator for web designers. Set container width, columns, gutters, and margins - get instant column width results and download your grid as PNG.

Grid Calculator by HSArticle gallery image

Free

Launch tags:Design Tools•Productivity•Developer Tools

Launch Team / Built With

Viktor.comAn AI coworker that actually does the work

Promoted

Maker

📌

Hey Product Hunt! 👋 I built this because I was tired of manually calculating column widths every time I started a new layout - plugging numbers into a random formula or eyeballing gutters in Figma. Grid Calculator does the math for you: enter container width, columns, gutter, and margin - get instant column width, plus a downloadable PNG grid overlay you can drop into Figma/Photoshop as a reference. It's 100% free, no signup, runs entirely in the browser. Built it as part of HSArticle, where I make free tools for designers and developers.

Report

2mo ago

The instant PNG download after tweaking the gutter values is such a nice touch, saves a ton of fiddling with screenshots. Really clean execution for a free tool.

Report

2mo ago

Maker

@sudelvyb Thanks so much Sude! 🙌 Really glad the PNG overlay is landing well, that was actually one of the trickier parts to get right, so it means a lot to hear it's saving you time. Appreciate you checking it out!

Report

2mo ago

Reviews