Columns

The Columns widget displays up to 2 columns in a card message or dialog. You can add widgets to each column; the widgets appear in the order that they are specified.

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 HorizontalSizeStyle 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.

To include more than 2 columns, or to use rows, use the Grid widget.

Supported by Chat apps, but not Google Workspace Add-ons.

Example: a card with two columns of text

The following image displays a card with a Columns widget that features 2 columns of text:

Figure 1: A card in Google Chat showing a Columns widget with 2 columns. Each column has a TextParagraph widget and custom the column width and alignment.

Here's the card's JSON:

JSON

{
  "cardsV2": [
    {
      "card": {
        "sections": [{
          "widgets": [
            {
              "columns": {
                "columnItems": [
                  {
                    "horizontalSizeStyle": "FILL_MINIMUM_SPACE",
                    "horizontalAlignment": "CENTER",
                    "verticalAlignment": "CENTER",
                    "widgets": [
                      {
                        "textParagraph": {
                          "text": "Hello World!",
                        }
                      }
                    ]
                  },
                  {
                    "horizontalSizeStyle": "FILL_AVAILABLE_SPACE",
                    "horizontalAlignment": "CENTER",
                    "verticalAlignment": "TOP",
                    "widgets": [
                      {
                        "textParagraph": {
                          "text": "Text paragraph widget with text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas viverra accumsan augue, non lobortis quam molestie at. Nunc vitae magna vel lectus ullamcorper accumsan. Nulla posuere pellentesque felis, sit amet vehicula nibh sagittis a. Vestibulum tempor ut quam non ultrices. Donec ut ullamcorper purus. Pellentesque interdum urna porta consectetur mollis.",
                        }
                      }
                    ]
                  }
                ]
              }
            }
          ]
        }]
      }
    }
  ]
}

JSON representation and fields

JSON representation
{ "columnItems": [ { object (Column) } ] }

Fields
columnItems[]	object (Column) An array of columns. You can include up to 2 columns in a card or dialog.

Column

A column.

JSON representation
{ "horizontalSizeStyle": enum (HorizontalSizeStyle), "horizontalAlignment": enum (HorizontalAlignment), "verticalAlignment": enum (VerticalAlignment), "widgets": [ { object (Widgets) } ] }

Fields
horizontalSizeStyle	enum (HorizontalSizeStyle) Specifies how a column fills the width of the card.
horizontalAlignment	enum (HorizontalAlignment) Specifies whether widgets align to the left, right, or center of a column.
verticalAlignment	enum (VerticalAlignment) Specifies whether widgets align to the top, bottom, or center of a column.
widgets[]	object (Widgets) An array of widgets included in a column. Widgets appear in the order that they are specified.

HorizontalSizeStyle

Specifies how a column fills the width of the card. The width of each column depends on both the HorizontalSizeStyle and the width of the widgets within the column.

Enums
HORIZONTAL_SIZE_STYLE_UNSPECIFIED	Unspecified. Do not use.
FILL_AVAILABLE_SPACE	Default value. Column fills the available space, up to 70% of the card's width. If both columns are set to FILL_AVAILABLE_SPACE, each column fills 50% of the space.
FILL_MINIMUM_SPACE	Column fills the least amount of space possible and no more than 30% of the card's width.

HorizontalAlignment

Specifies whether widgets align to the left, right, or center of a column.

Enums
HORIZONTAL_ALIGNMENT_UNSPECIFIED	Unspecified. Do not use.
START	Default value. Aligns widgets to the start position of the column. For left-to-right layouts, aligns to the left. For right-to-left layouts, aligns to the right.
CENTER	Aligns widgets to the center of the column.
END	Aligns widgets to the end position of the column. For left-to-right layouts, aligns widgets to the right. For right-to-left layouts, aligns widgets to the left.

VerticalAlignment

Specifies whether widgets align to the top, bottom, or center of a column.

Enums
VERTICAL_ALIGNMENT_UNSPECIFIED	Unspecified. Don't use.
CENTER	Default value. Aligns widgets to the center of a column.
TOP	Aligns widgets to the top of a column.
BOTTOM	Aligns widgets to the bottom of a column.

Widgets

The supported widgets that you can include in a column.

JSON representation

{ // Union field data can be only one of the following: "textParagraph": { object (TextParagraph) }, "image": { object (Image) }, "decoratedText": { object (DecoratedText) }, "buttonList": { object (ButtonList) }, "textInput": { object (TextInput) }, "selectionInput": { object (SelectionInput) }, "dateTimePicker": { object (DateTimePicker) } // End of list of possible types for union field data. }

Fields
Union field data. data can be only one of the following:
textParagraph	object (TextParagraph) TextParagraph widget.
image	object (Image) Image widget.
decoratedText	object (DecoratedText) DecoratedText widget.
buttonList	object (ButtonList) ButtonList widget.
textInput	object (TextInput) TextInput widget.
selectionInput	object (SelectionInput) SelectionInput widget.
dateTimePicker	object (DateTimePicker) DateTimePicker widget.