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
widget.
Grid
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:

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 (
|
Fields | |
---|---|
columnItems[]
|
An array of columns. You can include up to 2 columns in a card or dialog. |
Column
A column.
JSON representation |
---|
{ "horizontalSizeStyle": enum ( |
Fields | |
---|---|
horizontalSizeStyle
|
Specifies how a column fills the width of the card. |
horizontalAlignment
|
Specifies whether widgets align to the left, right, or center of a column. |
verticalAlignment
|
Specifies whether widgets align to the top, bottom, or center of a column. |
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 |
Fields | |
---|---|
Union field
|
|
textParagraph
|
|
image
|
|
decoratedText
|
|
buttonList
|
|
textInput
|
|
selectionInput
|
|
dateTimePicker
|
|