Use the Row for columns element with Column elements to add columns to your layout, note that it is a Flex container.

Locating the row for columns element

To find the Row for columns element:

1. Navigate to a component or a template with the Layout canvas
2. Click the + button on the Layout canvas
3. Within the Elements tab, look for the Row for column element.

The Row for columns element includes the following fields:

Bleed columns

• Bleed - Set child columns to Bleed into gutters (have no separating gutters) or Retain gutters (include separating gutters).
• Overflow hidden - Use Overflow hidden to prevent horizontal scrollbars showing when the Row for columns is the parent container.

Markup and style target

• Target - Use Target to select which element to apply styles and markup too.
  • Inner container (coh-row-inner) - Applies markup and styles to the inner container class .coh-row-inner
  • Outer container (coh-row) - Applies markup and styles to the outer container class .coh-row

Custom style

• Layout style - Apply a Layout custom style to the Column. See more information on Applying styles to elements.

Match heights of children

Use Match heights of children to target and equalize the heights of child elements of your Row for columns.

• Target element - Target the element you want to apply the match height too.
  • None - Removes match heights at the specific breakpoint
  • Specific elements - Match heights of Container, WYSIWYG, Paragraph, Headings, Buttons, Links, Block quotes and Citations which are direct children of Row for columns
  • With class name - Match the heights of Elements with a specific class name
• Target level - Use Target level to select which element to apply match heights to if there are more than one of the same element type directly within the Row for columns or Column. 

For more information on Match heights, see Match the heights of elements.

Comments

• Add comments - Add comments to the Element.  For more information, see Adding comments to an element.

Row for columns element

Use the Row for columns element with Column elements to add columns to your layout, note that it is a Flex container.

Important

Row for columns only accepts Column elements, Components (where the parent element is a Column) and View elements.

Important

If the Row for columns is used at the parent level (outer most element) of a layout, you will get a small amount of horizontal scrolling. This is caused by the gutters each side of the left and right grid columns. To prevent this, either toggle on the Overflow hidden toggle in the Row for column settings or place a Container around the Row for columns and apply overflow:hidden to it using a CSS style. You can do this in the Styles tab > Layout > Display > Overflow > Hidden.

Locating the row for columns element

To find the Row for columns element:

1. Navigate to a component or a template with the Layout canvas
2. Click the + button on the Layout canvas
3. Within the Elements tab, look for the Row for column element.

The Row for columns element includes the following fields:

Bleed columns

• Bleed - Set child columns to Bleed into gutters (have no separating gutters) or Retain gutters (include separating gutters).
• Overflow hidden - Use Overflow hidden to prevent horizontal scrollbars showing when the Row for columns is the parent container.

Markup and style target

• Target - Use Target to select which element to apply styles and markup too.
  • Inner container (coh-row-inner) - Applies markup and styles to the inner container class .coh-row-inner
  • Outer container (coh-row) - Applies markup and styles to the outer container class .coh-row

Custom style

• Layout style - Apply a Layout custom style to the Column. See more information on Applying styles to elements.

Match heights of children

Use Match heights of children to target and equalize the heights of child elements of your Row for columns.

• Target element - Target the element you want to apply the match height too.
  • None - Removes match heights at the specific breakpoint
  • Specific elements - Match heights of Container, WYSIWYG, Paragraph, Headings, Buttons, Links, Block quotes and Citations which are direct children of Row for columns
  • With class name - Match the heights of Elements with a specific class name
• Target level - Use Target level to select which element to apply match heights to if there are more than one of the same element type directly within the Row for columns or Column. 

For more information on Match heights, see Match the heights of elements.

Comments

• Add comments - Add comments to the Element.  For more information, see Adding comments to an element.