Version:

    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.

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

    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.

    row-for-columns.png

    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

    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

    DX8 knowledge base icon

    Frequently asked questions

    Get instant answers to common questions. Available online 24/7.

    Find answers

    Raise a ticket icon

    Raise a support ticket

    To raise a ticket, sign into Acquia Cloud and select Help in the top menu.

    Raise support ticket

    Acquia

    Copyright © 2020 Acquia, Inc. All Rights Reserved. Drupal is a registered trademark of Dries Buytaert.