Grid

IntroductionLinked dataHuman and agentComponents

Layout and media / Grid

Arrange comparable views or controls in columns.

Live exampleHow it worksSkill

When to use it

Arrange comparable views or controls in columns.

What the agent supplies

A fixed-column grid layout container for child components.

The agent chooses the content and binds it to the component. CLIO then renders the view and its available controls.

What the agent receives

The exact output of load_skill, including resolved local definitions.

load_skill("a2ui-catalog-clio-workspace", file="catalog.json#/components/Grid")

{
  "allOf": [
    {
      "$ref": "https://a2ui.org/specification/v0_9/common_types.json#/$defs/ComponentCommon"
    },
    {
      "properties": {
        "weight": {
          "description": "Relative flex weight of this component inside a Row or Column. Only meaningful as a direct child of one.",
          "type": "number"
        }
      },
      "type": "object"
    },
    {
      "properties": {
        "children": {
          "items": {
            "$ref": "https://a2ui.org/specification/v0_9/common_types.json#/$defs/ComponentId"
          },
          "type": "array"
        },
        "columns": {
          "maximum": 12,
          "minimum": 1,
          "type": "integer"
        },
        "component": {
          "const": "Grid"
        },
        "gap": {
          "maximum": 12,
          "minimum": 0,
          "type": "number"
        }
      },
      "required": [
        "component",
        "children"
      ],
      "type": "object"
    }
  ],
  "description": "A fixed-column grid layout container for child components.",
  "type": "object",
  "unevaluatedProperties": false
}

Standard refs (not loadable here): https://a2ui.org/specification/v0_9/common_types.json#/$defs/ComponentCommon, https://a2ui.org/specification/v0_9/common_types.json#/$defs/ComponentId