CSS Grid Generator

Open CSS Grid Generator on Happytails.ai. This view has the same page content and links, with explicit tool capabilities. Read the processing notes before using a tool.

Tool capabilities

{
  "id": "css-grid",
  "category": "design-tools",
  "built": true,
  "requirements": "Rows, columns, gaps and placements; responsive code output.",
  "implementation": {
    "fields": [
      {
        "key": "columns",
        "label": "Columns",
        "value": 3,
        "type": "number"
      },
      {
        "key": "gap",
        "label": "Gap (px)",
        "value": 16,
        "type": "number"
      }
    ],
    "input": false,
    "experience": {
      "automatic": true,
      "single": false,
      "inputMaxLength": 1000000,
      "inputMode": "text",
      "label": "CSS",
      "placeholder": "a { color: #3366cc; }",
      "help": "Paste CSS rules, including their selectors. Results update as you type. Up to 1,000,000 characters.",
      "helpParts": [
        "Paste CSS rules, including their selectors.",
        "Results update as you type.",
        "Up to 1,000,000 characters."
      ],
      "action": null
    },
    "mode": "automatic",
    "interactive": false
  },
  "execution": "POST /api/v1/tools/css-grid/run",
  "api": {
    "id": "css-grid",
    "name": "CSS grid",
    "category": "design-tools",
    "description": "Rows, columns, gaps and placements.",
    "notes": "",
    "human_path": "/en/design-tools/css-grid/",
    "method": "POST",
    "endpoint": "/api/v1/tools/css-grid/run",
    "schema_url": "/api/v1/tools/css-grid",
    "input_schema": {
      "type": "object",
      "additionalProperties": false,
      "properties": {
        "input": {
          "type": "string",
          "maxLength": 1000000,
          "default": "",
          "description": "Plain text input. File tools use files instead unless otherwise documented."
        },
        "options": {
          "type": "object",
          "additionalProperties": false,
          "properties": {
            "columns": {
              "type": "number",
              "description": "Columns",
              "default": 3.0
            },
            "gap": {
              "type": "number",
              "description": "Gap (px)",
              "default": 16.0
            }
          }
        }
      }
    },
    "output_schema": {
      "type": "object",
      "required": [
        "tool",
        "result"
      ],
      "properties": {
        "tool": {
          "type": "string"
        },
        "result": {
          "type": "object",
          "required": [
            "text",
            "files"
          ],
          "properties": {
            "text": {
              "type": [
                "string",
                "null"
              ]
            },
            "data": {
              "description": "Parsed JSON when the textual result is JSON."
            },
            "name": {
              "type": "string"
            },
            "mime": {
              "type": "string"
            },
            "files": {
              "type": "array",
              "items": {
                "type": "object",
                "required": [
                  "name",
                  "mime",
                  "bytes",
                  "base64"
                ],
                "properties": {
                  "name": {
                    "type": "string"
                  },
                  "mime": {
                    "type": "string"
                  },
                  "bytes": {
                    "type": "integer"
                  },
                  "base64": {
                    "type": "string",
                    "contentEncoding": "base64"
                  }
                }
              }
            }
          }
        }
      }
    },
    "processing": "Server; same transformation code as browser tools",
    "limits": {
      "request_bytes": 8388608,
      "input_characters": 1000000,
      "files_bytes": 5242880,
      "max_files": 0,
      "timeout_seconds": 12
    }
  },
  "agent_processing": "Server; same transformation code as browser tools",
  "browser_agent": {
    "supported": true,
    "name": "run_current_tool",
    "discovery": "WebMCP on the human page in a supporting browser",
    "verification": "See audit/API-AUDIT.md; availability is not verification"
  }
}

Page guide