> ## Documentation Index
> Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Grid cells

> Modifiers for fine-tuning individual cell behavior inside a Grid

export const PlatformStatuses = ({statuses}) => {
  const StatusBadge = ({status, label}) => {
    const styles = {
      green: {
        backgroundColor: '#dcfce7',
        color: '#166534'
      },
      orange: {
        backgroundColor: '#fed7aa',
        color: '#9a3412'
      },
      red: {
        backgroundColor: '#fecaca',
        color: '#991b1b'
      },
      gray: {
        backgroundColor: '#f3f4f6',
        color: '#4b5563'
      }
    };
    const baseStyle = {
      display: 'inline-flex',
      alignItems: 'center',
      padding: '0.125rem 0.625rem',
      borderRadius: '9999px',
      fontSize: '0.875rem',
      fontWeight: '500'
    };
    const colorStyle = styles[status] || styles.green;
    return <span style={{
      ...baseStyle,
      ...colorStyle
    }}>
        {label || status}
      </span>;
  };
  const STATUS_CONFIG = {
    supported: {
      label: "Supported",
      color: "green"
    },
    partial: {
      label: "Partial",
      color: "orange"
    },
    "not-implemented": {
      label: "Not Implemented",
      color: "gray"
    }
  };
  const renderCard = (platform, value) => {
    if (!value) return null;
    const {status, note} = typeof value === "string" ? {
      status: value
    } : value;
    const config = STATUS_CONFIG[status];
    if (!config) return null;
    const titleMap = {
      ios: "SwiftUI",
      android: "Jetpack Compose",
      web: "Web"
    };
    return <Card key={platform} title={titleMap[platform] || platform}>
          <StatusBadge status={config.color} label={config.label} />
          {note && <div style={{
      marginTop: '0.5rem',
      fontSize: '0.875rem',
      color: '#6b7280'
    }}>
              {note}
            </div>}
      </Card>;
  };
  if (statuses == null) {
    return null;
  }
  return <Columns cols="3">
      {Object.entries(statuses).map(([platform, value]) => renderCard(platform, value))}
    </Columns>;
};

export const ComposeJS = ({code, name, height}) => {
  const encodedCode = useMemo(() => {
    if (!code) return "";
    try {
      return btoa(code);
    } catch (e) {
      console.error("Failed to encode code", e);
      return "";
    }
  }, [code]);
  if (!encodedCode) {
    return null;
  }
  return <iframe src={`https://www.metabind.ai/embed?code=${encodedCode}&name=${name ?? 'Example'}`} loading="lazy" style={{
    width: "100%",
    height: height || '350px',
    border: "1px solid #e5e7eb",
    borderRadius: "var(--rounded-2xl,1rem)",
    overflow: "hidden"
  }} title="ComposeJS Preview" />;
};

These iOS-only modifiers refine how individual cells behave inside a [Grid](/bindjs/components/Grid). Use them to span columns, anchor a cell within its allocated space, override column-wide alignment, or opt out of grid sizing on an axis.

Apply each modifier to the cell view inside a [GridRow](/bindjs/components/GridRow). `gridColumnAlignment` is special: applied to one cell, it sets the alignment of the entire column.

## gridCellColumns

Makes a grid cell span multiple columns.

```typescript theme={null}
.gridCellColumns(count: number): Component
```

<ParamField path="count" type="number" required>
  The number of columns this cell should span.
</ParamField>

<PlatformStatuses
  statuses={{
ios: { status: "supported" },
android: "not-implemented",
web: "not-implemented",
}}
/>

**Spanning a header across all columns**

```typescript theme={null}
Grid([
    GridRow([
        Text("Full Width Header")
            .font("headline")
            .gridCellColumns(3)
    ]),
    GridRow([
        Text("Col 1"),
        Text("Col 2"),
        Text("Col 3")
    ])
])
```

**Two-column span in a three-column grid**

```typescript theme={null}
Grid([
    GridRow([
        Text("A"),
        Text("B"),
        Text("C")
    ]),
    GridRow([
        Text("Wide Cell")
            .gridCellColumns(2),
        Text("D")
    ])
])
```

## gridCellAnchor

Sets the anchor position for a grid cell within its allocated space.

```typescript theme={null}
.gridCellAnchor(anchor: UnitPoint): Component
```

<ParamField path="anchor" type="UnitPoint" required>
  The anchor point within the cell. A [UnitPoint](/bindjs/types/UnitPoint) where `{ x: 0, y: 0 }` is the top-leading corner and `{ x: 1, y: 1 }` is the bottom-trailing corner. You can also use string presets like `"center"`, `"topLeading"`, `"bottomTrailing"`, etc.
</ParamField>

<PlatformStatuses
  statuses={{
ios: { status: "supported" },
android: "not-implemented",
web: "not-implemented",
}}
/>

**Positioning a cell at the top-leading corner**

```typescript theme={null}
Grid([
    GridRow([
        Text("Top Left")
            .gridCellAnchor("topLeading"),
        Text("Center")
    ]),
    GridRow([
        Text("A"),
        Text("B")
    ])
])
```

**Custom anchor point**

```typescript theme={null}
Grid([
    GridRow([
        Circle()
            .frame({ width: 20, height: 20 })
            .foregroundStyle(Color("blue"))
            .gridCellAnchor({ x: 0.5, y: 0 })
    ])
])
```

## gridColumnAlignment

Overrides the horizontal alignment for an entire grid column.

```typescript theme={null}
.gridColumnAlignment(guide: HorizontalAlignment): Component
```

<ParamField path="guide" type="HorizontalAlignment" required>
  The horizontal alignment for the column. One of `"leading"`, `"center"`, or `"trailing"`.
</ParamField>

<PlatformStatuses
  statuses={{
ios: { status: "supported" },
android: "not-implemented",
web: "not-implemented",
}}
/>

**Right-aligning a column**

```typescript theme={null}
Grid([
    GridRow([
        Text("Name"),
        Text("Price")
            .gridColumnAlignment("trailing")
    ]),
    GridRow([
        Text("Widget"),
        Text("$9.99")
    ]),
    GridRow([
        Text("Gadget"),
        Text("$19.99")
    ])
])
```

**Mixed column alignments**

```typescript theme={null}
Grid([
    GridRow([
        Text("Left")
            .gridColumnAlignment("leading"),
        Text("Center")
            .gridColumnAlignment("center"),
        Text("Right")
            .gridColumnAlignment("trailing")
    ]),
    GridRow([
        Text("A"),
        Text("B"),
        Text("C")
    ])
])
```

<Note>
  This modifier is applied to a cell in any row and affects the alignment of the entire column across all rows. You only need to apply it to one cell per column.
</Note>

## gridCellUnsizedAxes

Opts a grid cell out of being sized along specified axes, using its ideal size instead.

```typescript theme={null}
.gridCellUnsizedAxes(axes: Axis): Component
```

<ParamField path="axes" type="Axis" required>
  The axes along which the cell should use its ideal size instead of the grid-assigned size. See [Axis](/bindjs/types/Axis).
</ParamField>

<PlatformStatuses
  statuses={{
ios: { status: "supported" },
android: "not-implemented",
web: "not-implemented",
}}
/>

**Using ideal width in a grid cell**

```typescript theme={null}
Grid([
    GridRow([
        Text("Fixed width")
            .gridCellUnsizedAxes("horizontal"),
        Text("Flexible")
    ]),
    GridRow([
        Text("A"),
        Text("B")
    ])
])
```

**Using ideal height in a grid cell**

```typescript theme={null}
Grid([
    GridRow([
        Circle()
            .frame({ width: 40, height: 40 })
            .foregroundStyle(Color("blue"))
            .gridCellUnsizedAxes("vertical"),
        Text("Description")
    ])
])
```

<Note>
  By default, grid cells expand to fill the space allocated by the grid. This modifier lets a cell opt out of that behavior on one or both axes, using its intrinsic (ideal) size instead.
</Note>

## See also

* [Grid](/bindjs/components/Grid) — the grid layout container
* [GridRow](/bindjs/components/GridRow) — a row within a grid
* [Axis](/bindjs/types/Axis) — axis values
* [UnitPoint](/bindjs/types/UnitPoint) — anchor point values