---
url: /documentation/input-types/columnlayout.md
description: >-
  Configure responsive column layouts with viewports, fixed or variable columns,
  order reversal, and isolated value storage.
---

# Column Layout Input

Define a responsive grid layout and set the width of columns.

```js
{
  input: {
    type: 'columnlayout', // [!code focus:6]
    viewports: [
      { id: 'small', label: 'Mobile' },
      { id: 'medium', label: 'Table' },
      { id: 'large', label: 'Desktop' }
    ]
  }
}
```

## Input Options

| Option | Values | Default | Description |
| - | - | - | - |
| `viewports` | `Viewport[]` | - | Viewports to handle |
| `columns` | `number` | `12` | The maximum number of columns |
| `allowReverse` | `boolean` | `true` | Whether to allow reversing the order of columns |
| `columnSizeSource` | `'value' \| 'children'` | `'children'` | Whether the column sizes are determined by the input's value or by the child elements |

with

```ts
interface Viewport {
  // Unique identifier of the viewport
  id: string

  // Human readable label of the viewport
  label: string

  // Number of columns which an item spans by default in the viewport
  // Defaults to the maximum number of columns
  defaultSize?: number
}
```

## Retrieving Values

The input's value is an object with an `order` property whose value is `"default"` or `"reversed"`.

```php
if ($node->properties->columnLayoutProperty->order === 'reversed') {
   // ...
};
```

By default, the actual column widths are stored as a `{ [id: string]: number }` object in the `_columns` property of each of the layout's child elements:

```php
foreach ($node->children as $child) {
   echo $child->properties->_columns->sm; // e.g. 6
};
```

If `columnSizeSource` is set to `'value'`, the column sizes are stored as an array in the `columns` property of the input's value:

```php
$node->properties->columnLayoutProperty->columns->sm; // e.g. [4, 4, 4]
```

## Using Isolated Layouts 

Historically (and therefore by default), this input type stores its value on the node's children. However, if `columnSizeSource` is set to `'value'`, column sizes are isolated to the input's value (as it is with most other input types).

Since child nodes are not considered in isolated mode, the number of columns must be defined on the property itself via the `defaultValue` option:

```js
{
  input: {
    type: 'columnlayout',
    viewports: [
      { id: 'small', label: 'Mobile' },
      { id: 'medium', label: 'Table' },
      { id: 'large', label: 'Desktop' }
    ]
  },

  // Option 1: Use an array, applied to all viewports
  defaultValue: [4, 4, 4],

  // Option 2: Use an object to define columns per viewport
  // Intermediate viewports may be omitted and are automatically filled
  defaultValue: {
    small: [12, 12, 12],
    large: [4, 4, 4],
  },
}
```