Column grid math API

Solves a column grid (W = n*col + (n-1)*gutter) returning column width, percentages, and the x-position of every column. Answers 'What is the column width for a 12-column 1200px grid with 20px gutters?', 'Where does each column start?'.

Price$0.04per request

MethodPOST

Route/v1/design/column-grid

StatusLive

MIME typeapplication/json

Rate limit120/minute

Cache0s public

designlayoutgridcolumnsguttercolumn-widthcss-gridresponsive

API URLhttps://x402.hexl.dev/v1/design/column-grid

Integration docs

Example request

{
  "containerWidth": 1200,
  "columns": 12,
  "gutter": 20,
  "margin": 0
}

Example response

{
  "containerWidth": 1200,
  "columns": 12,
  "gutter": 20,
  "margin": 0,
  "innerWidth": 1200,
  "columnWidth": 81.6667,
  "totalGutterWidth": 220,
  "columnWidthPercent": 6.8056,
  "gutterPercent": 1.6667,
  "columnPositions": [
    {
      "index": 0,
      "x": 0,
      "width": 81.6667
    },
    {
      "index": 1,
      "x": 101.6667,
      "width": 81.6667
    },
    {
      "index": 2,
      "x": 203.3333,
      "width": 81.6667
    },
    {
      "index": 3,
      "x": 305,
      "width": 81.6667
    },
    {
      "index": 4,
      "x": 406.6667,
      "width": 81.6667
    },
    {
      "index": 5,
      "x": 508.3333,
      "width": 81.6667
    },
    {
      "index": 6,
      "x": 610,
      "width": 81.6667
    },
    {
      "index": 7,
      "x": 711.6667,
      "width": 81.6667
    },
    {
      "index": 8,
      "x": 813.3333,
      "width": 81.6667
    },
    {
      "index": 9,
      "x": 915,
      "width": 81.6667
    },
    {
      "index": 10,
      "x": 1016.6667,
      "width": 81.6667
    },
    {
      "index": 11,
      "x": 1118.3333,
      "width": 81.6667
    }
  ],
  "cssGridTemplate": "repeat(12, 1fr) / gap 20px",
  "interpretation": "12 columns of 81.67 with 20 gutters inside 1200 usable width."
}

Input schema

{
  "type": "object",
  "required": [
    "containerWidth",
    "columns"
  ],
  "properties": {
    "containerWidth": {
      "type": "number",
      "description": "Total container width",
      "examples": [
        1200
      ]
    },
    "columns": {
      "type": "number",
      "description": "Number of columns (positive integer)",
      "examples": [
        12
      ]
    },
    "gutter": {
      "type": "number",
      "description": "Gap between columns (default 0)",
      "examples": [
        20
      ]
    },
    "margin": {
      "type": "number",
      "description": "Outer margin each side (default 0)",
      "examples": [
        0
      ]
    }
  }
}

Output schema

{
  "type": "object",
  "additionalProperties": true
}