Columns

The `https://developers.google.com/apps-script/reference/card-service/columns#` widget displays up to 2 columns in a card or dialog. You can add widgets to
each `https://developers.google.com/apps-script/reference/card-service/column`; the widgets appear in the order that they are specified. For an example in
Google Chat apps, see [Columns](https://developers.google.com/workspace/chat/format-structure-card-dialog#display_cards_and_dialogs_in_columns).

The height of each column is determined by the taller column. For example, if the first column
is taller than the second column, both columns have the height of the first column. Because each
column can contain a different number of widgets, you can't define rows or align widgets between
the columns.

Columns are displayed side-by-side. You can customize the width of each column using the
`https://developers.google.com/apps-script/reference/card-service/horizontal-size-style` field. If the user's screen width is too narrow, the second column
wraps below the first:

- On web, the second column wraps if the screen width is less than or equal to 480 pixels.
- On iOS devices, the second column wraps if the screen width is less than or equal to 300 pt.
- On Android devices, the second column wraps if the screen width is less than or equal to 320 dp.

Available for Google Chat apps and Google Workspace add-ons. The add-on UIs that support
columns include:

- The dialog displayed when users open the add-on from an email draft.
- The dialog displayed when users open the add-on from the **Add attachment** menu in a Google Calendar event.

  ```javascript
  // Build a column that is aligned in the center and fills the space:
  const column =
      CardService.newColumn()
          .setHorizontalSizeStyle(
              CardService.HorizontalSizeStyle.FILL_AVAILABLE_SPACE)
          .setHorizontalAlignment(CardService.HorizontalAlignment.CENTER)
          .setVerticalAlignment(CardService.VerticalAlignment.CENTER);
  const columns = CardService.newColumns().addColumn(column).setWrapStyle(
      CardService.WrapStyle.WRAP);
  ```

### Methods

| Method | Return type | Brief description |
|---|---|---|
| `https://developers.google.com/apps-script/reference/card-service/columns#addColumn(Column)` | `https://developers.google.com/apps-script/reference/card-service/columns#` | Adds a `https://developers.google.com/apps-script/reference/card-service/column` to the Columns widget. |
| `https://developers.google.com/apps-script/reference/card-service/columns#addEventAction(EventAction)` | `https://developers.google.com/apps-script/reference/card-service/widget` | Adds the event action that can be performed on the widget. |
| `https://developers.google.com/apps-script/reference/card-service/columns#setId(String)` | `https://developers.google.com/apps-script/reference/card-service/widget` | Sets the unique ID assigned that's used to identify the widget to be mutated. |
| `https://developers.google.com/apps-script/reference/card-service/columns#setVisibility(Visibility)` | `https://developers.google.com/apps-script/reference/card-service/widget` | Sets the visibility of the widget. |
| `https://developers.google.com/apps-script/reference/card-service/columns#setWrapStyle(WrapStyle)` | `https://developers.google.com/apps-script/reference/card-service/columns#` | Sets the wrap style of the columns, controls how the column resizes based on screen width. |

## Detailed documentation

### `addColumn(column)`

Adds a `https://developers.google.com/apps-script/reference/card-service/column` to the Columns widget. Columns are displayed in the order in which
they're added. You can add up to two columns.

```javascript
const columns = CardService.newColumns().addColumn(CardService.newColumn());
```

#### Parameters

| Name | Type | Description |
|---|---|---|
| `column` | `https://developers.google.com/apps-script/reference/card-service/column` | A child column to add to the Columns widget. |

#### Return


`https://developers.google.com/apps-script/reference/card-service/columns#` --- This object, for chaining.

*** ** * ** ***

### `addEventAction(eventAction)`

Adds the event action that can be performed on the widget.

#### Parameters

| Name | Type | Description |
|---|---|---|
| `eventAction` | `https://developers.google.com/apps-script/reference/card-service/event-action` | The `https://developers.google.com/apps-script/reference/card-service/event-action` to be added. |

#### Return


`https://developers.google.com/apps-script/reference/card-service/widget` --- The Object, for chaining.

*** ** * ** ***

### `setId(id)`

Sets the unique ID assigned that's used to identify the widget to be mutated. Widget mutation
is only supported in Add-Ons.

#### Parameters

| Name | Type | Description |
|---|---|---|
| `id` | `String` | The id of the widget, with a limit of 64 characters and in format of \`\[a-zA-Z0-9-\]+\`. |

#### Return


`https://developers.google.com/apps-script/reference/card-service/widget` --- This object, for chaining.

*** ** * ** ***

### `setVisibility(visibility)`

Sets the visibility of the widget. The default value is \`VISIBLE\`.

#### Parameters

| Name | Type | Description |
|---|---|---|
| `visibility` | `https://developers.google.com/apps-script/reference/card-service/visibility` | The `https://developers.google.com/apps-script/reference/card-service/visibility` of the widget. |

#### Return


`https://developers.google.com/apps-script/reference/card-service/widget` --- The Object, for chaining.

*** ** * ** ***

### `setWrapStyle(wrapStyle)`

Sets the wrap style of the columns, controls how the column resizes based on screen width.

```javascript
const columns = CardService.newColumns()
                    .addColumn(CardService.newColumn())
                    .setWrapStyle(CardService.WrapStyle.WRAP);
```

#### Parameters

| Name | Type | Description |
|---|---|---|
| `wrapStyle` | `https://developers.google.com/apps-script/reference/card-service/wrap-style` | The wrap style to set for the columns. |

#### Return


`https://developers.google.com/apps-script/reference/card-service/columns#` --- This object, for chaining.