---
title: grid
description: A CSS grid container: give it a column count or template and children place themselves into cells.
status: shipped
url: https://getairframe.com/framewerk/reference/nodes/grid
---

> Part of the Framewerk docs. Index of every page: /framewerk/llms.txt

# `grid`

A CSS grid container: give it a column count or template and children place themselves into cells.

## Example

**grid**

```json
{
  "id": "g",
  "layout": {
    "_id": "root",
    "type": "grid",
    "columns": 2,
    "gap": 12,
    "padding": 16,
    "children": [
      {
        "_id": "c1",
        "type": "column",
        "children": [
          {
            "_id": "t1",
            "type": "text",
            "content": "One"
          }
        ]
      },
      {
        "_id": "c2",
        "type": "column",
        "children": [
          {
            "_id": "t2",
            "type": "text",
            "content": "Two"
          }
        ]
      },
      {
        "_id": "c3",
        "type": "column",
        "children": [
          {
            "_id": "t3",
            "type": "text",
            "content": "Three"
          }
        ]
      },
      {
        "_id": "c4",
        "type": "column",
        "children": [
          {
            "_id": "t4",
            "type": "text",
            "content": "Four"
          }
        ]
      }
    ]
  }
}
```

## States

Child spans (`span`, `rowSpan`, `area`) and grid-level overrides. Common to every node: `hover` / `press` / `focus` CSS bags, `showWhen` / `hideWhen`, `animate`.

## Stability

This node type is part of the format contract: adding an optional prop is additive; removing the node or narrowing an existing prop is breaking. Prop tables are generated from the schema; this page carries the prose.