{"capturedAt":"2026-10-18T20:45:46.739641+00:00","categories":[{"name":"Design","slug":"design"}],"description":"Enter container width, number of columns, gutter size, and margin size to instantly get exact column widths for your CSS. Includes reference presets for common frameworks (Bootstrap, Material Design) and lets you download the generated grid as a PNG for use in Figma, Photoshop, or as a design overlay. Free, no login required.","images":[{"alt":"","originalSrc":"/_next/image?url=https%3A%2F%2Fcdn.findly.tools%2Fupload-1785477164613.png&w=96&q=75","url":"https://cdn.findly.tools/upload-1785477164613.png"}],"links":[{"text":"Design","url":"https://findly.tools/categories/design"},{"text":"Visit website","url":"https://hsarticle.com/grid-calculator/?utm_source=Findly.tools"}],"metadata":[{"content":"width=device-width, initial-scale=1, maximum-scale=5, user-scalable=yes","name":"viewport"},{"content":"A grid calculator that eliminates manual math for responsive layout design. Enter container width, number of columns, gutter size, and margin size to","name":"description"},{"content":"Eric","name":"author"},{"content":"Grid Calculator by HSArticle,design tool,design software","name":"keywords"},{"content":"Eric","name":"creator"},{"content":"Findly.tools","name":"publisher"},{"content":"index, follow","name":"robots"},{"content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1","name":"googlebot"},{"content":"technology","name":"category"},{"content":"Grid Calculator by HSArticle | Findly","name":"og:title"},{"content":"A grid calculator that eliminates manual math for responsive layout design. Enter container width, number of columns, gutter size, and margin size to","name":"og:description"},{"content":"https://findly.tools/grid-calculator-by-hsarticle","name":"og:url"},{"content":"Findly.tools","name":"og:site_name"},{"content":"https://findly.tools/grid-calculator-by-hsarticle/opengraph-image","name":"og:image"},{"content":"1200","name":"og:image:width"},{"content":"630","name":"og:image:height"},{"content":"Grid Calculator by HSArticle - Featured on Findly.tools","name":"og:image:alt"},{"content":"website","name":"og:type"},{"content":"summary_large_image","name":"twitter:card"},{"content":"Grid Calculator by HSArticle | Findly","name":"twitter:title"},{"content":"A grid calculator that eliminates manual math for responsive layout design. Enter container width, number of columns, gutter size, and margin size to","name":"twitter:description"},{"content":"https://findly.tools/grid-calculator-by-hsarticle/opengraph-image","name":"twitter:image"}],"pageTitle":"Grid Calculator by HSArticle | Findly","pricingLabel":"","schemas":[{"@context":"https://schema.org","@id":"https://findly.tools/#organization","@type":"Organization","description":"Curated directory of tools and resources for developers, creators, and entrepreneurs. Find the perfect tool for your next project.","founder":{"@type":"Person","name":"Eric","url":"https://x.com/eribn09"},"logo":"https://findly.tools/logo.png","name":"Findly.tools","sameAs":["https://x.com/findlytools"],"url":"https://findly.tools"},{"@context":"https://schema.org","@id":"https://findly.tools/grid-calculator-by-hsarticle#webpage","@type":"WebPage","description":"A grid calculator that eliminates manual math for responsive layout design. Enter container width, number of columns, gutter size, and margin size to instantly get exact column widths for your CSS. Includes reference presets for common frameworks (Bootstrap, Material Design) and lets you download the generated grid as a PNG for use in Figma, Photoshop, or as a design overlay. Free, no login required.","image":"https://cdn.findly.tools/upload-1785477164613.png","isPartOf":{"@id":"https://findly.tools/#website","@type":"WebSite","name":"Findly.tools","url":"https://findly.tools"},"mainEntityOfPage":"https://findly.tools/grid-calculator-by-hsarticle","name":"Grid Calculator by HSArticle","sameAs":"https://hsarticle.com/grid-calculator/","url":"https://findly.tools/grid-calculator-by-hsarticle"},{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","item":"https://findly.tools","name":"Home","position":1},{"@type":"ListItem","item":"https://findly.tools/categories/design","name":"Design","position":2},{"@type":"ListItem","item":"https://findly.tools/grid-calculator-by-hsarticle","name":"Grid Calculator by HSArticle","position":3}]}],"sections":[{"heading":"What it does","items":[],"text":"Enter container width, number of columns, gutter size, and margin size to instantly get exact column widths for your CSS. Includes reference presets for common frameworks (Bootstrap, Material Design) and lets you download the generated grid as a PNG for use in Figma, Photoshop, or as a design overlay. Free, no login required."}],"sourceText":"Grid Calculator by HSArticle\n\nDesign\n\nVisit websiteA grid calculator that eliminates manual math for responsive layout design.\n\nDetails\n\nWhat it does\n\nEnter container width, number of columns, gutter size, and margin size to instantly get exact column widths for your CSS. Includes reference presets for common frameworks (Bootstrap, Material Design) and lets you download the generated grid as a PNG for use in Figma, Photoshop, or as a design overlay. Free, no login required.","sourceUrl":"https://findly.tools/grid-calculator-by-hsarticle","tagline":"A grid calculator that eliminates manual math for responsive layout design.","version":1}