{"uid":"cap_GqFNWCyzATmZjVbjwyLjF","slug":"css-design-calc-grid-column-width-calculator-285e7c7a","name":"CSS Design Calc – Grid Column Width Calculator","description":"Column and span widths for an N-column grid from container width, columns and gutter, or the container for a column width.","url":"https://css-design-calc.x402tookit.com/grid-columns?utm_source=zero.xyz","method":"GET","headers":{},"bodySchema":{"type":"object","$schema":"https://json-schema.org/draft/2020-12/schema","required":["input"],"properties":{"input":{"type":"object","required":["type","method"],"properties":{"type":{"type":"string","const":"http"},"method":{"enum":["GET"],"type":"string"},"queryParams":{"type":"object","required":["columns","gutter"],"properties":{"gutter":{"type":"number","description":"Gap between columns, in px (or any unit)"},"margin":{"type":"number","description":"Outer margin on each side, added to the page width (default 0)"},"columns":{"type":"integer","description":"Number of columns, 1 to 48"},"columnWidth":{"type":"number","description":"Width of one column; returns the container width"},"containerWidth":{"type":"number","description":"Total width available to the columns (use this, or columnWidth)"}}}},"additionalProperties":false},"output":{"type":"object","required":["type"],"properties":{"type":{"type":"string"},"example":{"type":"object","properties":{"css":{"type":["null","string"]},"asOf":{"type":["null","string"]},"spans":{"type":["array","null"],"items":{"type":"object","properties":{"span":{"type":["null","number"]},"width":{"type":["null","number"]},"percentOfContainer":{"type":["null","number"]},"percentWithGutterAfter":{"type":["null","number"]}}}},"gutter":{"type":["null","number"]},"source":{"type":["null","string"]},"columns":{"type":["null","number"]},"reasons":{"type":["array","null"],"items":{"type":"string"}},"summary":{"type":["null","string"]},"verdict":{"type":["null","string"]},"degraded":{"type":["boolean","null"]},"pageWidth":{"type":["null","number"]},"disclaimer":{"type":["null","string"]},"notChecked":{"type":["array","null"],"items":{"type":"string"}},"columnWidth":{"type":["null","number"]},"gutterTotal":{"type":["null","number"]},"columnPercent":{"type":["null","number"]},"containerWidth":{"type":["null","number"]}}}}}}},"responseSchema":null,"example":null,"exampleRequest":null,"tags":["x402"],"displayCostAmount":"0.02","displayCostAsset":"USDC","priceDynamic":false,"priceHint":null,"priceStatus":"priced","priceSource":"probe","requiresHandshake":false,"reviewCount":0,"rating":{"score":"0.00","successRate":"0.00","reviews":0,"stars":null,"state":"unrated"},"availabilityStatus":"unknown","priceObserved":null,"sessionDeposit":null,"pricing":{"kind":"static","summary":"$0.02/call","primary":{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.02","per":"call","confidence":"exact"},"accepted":[{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.02","per":"call","confidence":"exact"}]},"paymentMethods":[{"uid":"pm_vZ4NtAsZvUmpAINglWVLi","protocol":"x402","methodType":"crypto","chain":"base","mode":"charge","costAmount":"0.02","costPer":"request","priority":0,"asset":"0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913","unit":"request","depositMicros":null,"planRef":null}],"brandName":null,"brandSlug":null,"brandBaseUrl":null,"brandDocsUrl":null,"whatItDoes":"Calculates column widths and span widths for an N-column grid from container width, column count, and gutter size — or reverse-calculates the container width from a known column width.","exampleAgentPrompt":"For a 12-column grid inside a 1200px container with a 24px gutter, calculate all the column and span widths — including what percentage of the container each span takes up.","exampleUseCases":[{"title":"Responsive grid layout planning","prompt":"I'm building a website with a 1440px container, 12 columns, and 16px gutters — can you calculate the exact width of each column and all the multi-column spans so I can set up my CSS grid?"},{"title":"Reverse-engineer container from column size","prompt":"I want each column to be exactly 72px wide in a 12-column grid with an 8px gutter. What total container width do I need?"},{"title":"Quick span width lookup for a design system","prompt":"In a 24-column grid with a 1280px container and 20px gutters, what's the pixel width of a 6-column span and an 8-column span?"}],"resultDescription":"Returns column width in px, a list of span objects (span count, pixel width, percent of container, percent including gutter), total gutter width, container width, column percent, an optional CSS snippet, and a human-readable summary. If inputs are inconsistent or incomplete, a verdict and reasons array explain what could not be computed.","failureModes":["Missing required 'columns' or 'gutter' parameters returns an error","Providing neither 'containerWidth' nor 'columnWidth' results in an incomplete calculation","Column count outside 1–48 range may be rejected or return degraded results","Non-numeric values for numeric fields cause schema validation failure","Conflicting containerWidth and columnWidth may yield a degraded or partial response with explanation in 'reasons'"],"whenToPreferThis":"Choose this endpoint when you need precise, math-correct column and span width calculations for CSS grid or traditional column-based layouts — especially when you need all span widths at once, need a CSS snippet, or want to reverse-calculate container width from a target column width. Prefer it over manual calculation or general-purpose math tools because it understands CSS grid conventions (gutters, margins, spans) natively and returns design-ready percentages alongside pixel values.","instructions":null,"reviewSummary":null,"reviewSummaryHighlights":null,"reviewSummaryConcerns":null,"reviewSummaryGeneratedAt":null,"activationCount":0,"lastUsedAt":null,"lastSuccessfullyRanAt":null,"lastHealthCheckAt":"2026-10-30T00:34:28.524Z","isFirstParty":false,"canonicalSlug":"css-design-calc-grid-column-width-calculator-285e7c7a"}