Css Grid Generator API

POST https://api.findutils.com/api/tools/css-grid-generator/execute

Generate a CSS Grid container declaration. sizing=equal gives repeat(n, 1fr); auto-fit and auto-fill give a responsive repeat(auto-fit, minmax(min_width, 1fr)) that needs no media query; custom takes your own track lists. Optional named areas are validated so every row declares the same number of cells, which is the usual reason a grid silently collapses. Returns the full rule, the separate template values, and the area names for the child rules.

Try it

Request body

application/json

columns

integer optional

Number of columns (1 to 24). Used by sizing=equal. Default 3. Default 3.
rows

integer optional

Number of rows (0 to 24). 0 lets rows be implicit. Default 0. Default 0.
gap

number optional

Gap between columns in px (0 to 200). Default 16. Default 16.
row_gap

number optional

Gap between rows in px (0 to 200). Defaults to the column gap.
sizing

string optional

equal, auto-fit, auto-fill or custom. Default equal. One of equal · auto-fit · auto-fill · custom. Default "equal".
min_width

number optional

For auto-fit and auto-fill: the minimum track width in px (20 to 1000). Default 240. Default 240.
column_template

string optional

For sizing=custom: a track list such as "200px 1fr 200px".
row_template

string optional

For sizing=custom: a row track list such as "auto 1fr auto".
areas

string optional

Optional named areas, one row per line or per quoted group, e.g. "header header" / "sidebar main".

Example arguments

Verified

{
  "columns": 3,
  "gap": 16,
  "sizing": "equal"
}

curl -X POST https://api.findutils.com/api/tools/css-grid-generator/execute \
  -H "Content-Type: application/json" \
  -d '{
    "columns": 3,
    "gap": 16,
    "sizing": "equal"
  }'

const response = await fetch('https://api.findutils.com/api/tools/css-grid-generator/execute', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({"columns":3,"gap":16,"sizing":"equal"}),
});
const data = await response.json();

import requests

response = requests.post(
    "https://api.findutils.com/api/tools/css-grid-generator/execute",
    json={"columns":3,"gap":16,"sizing":"equal"},
)
data = response.json()

$ch = curl_init('https://api.findutils.com/api/tools/css-grid-generator/execute');
curl_setopt_array($ch, [
    CURLOPT_POST => true,
    CURLOPT_HTTPHEADER => ['Content-Type: application/json'],
    CURLOPT_POSTFIELDS => '{"columns":3,"gap":16,"sizing":"equal"}',
    CURLOPT_RETURNTRANSFER => true,
]);
$data = json_decode(curl_exec($ch), true);

Also an MCP tool

Call css_grid_generator from Claude, Cursor or any MCP client. Same arguments, same output.

https://mcp.findutils.com

MCP reference

Rate limit: 60 a minute, per IP
Auth: None
REST id: css-grid-generator
MCP name: css_grid_generator
Category: Generators
Machine-readable: openapi.json · markdown.md

Request body

Example arguments

More Generators tools

More to explore