Match the heights of elements

    You can match the heights of elements on the Layout canvas to create horizontally aligned layouts. Different elements have different match heights options. These are as follows:

    Row for columns - match heights of children

    The Row for columns element includes the option to match the heights of either nested Columns or direct child elements of those Columns. You can also target the level you want to apply the match heights to. The options include:

    • Match heights of children - Match the heights of child elements using:
      • None - Removes match heights at the specific breakpoint. This is useful for removing Match heights when Columns stack vertically on narrow device widths. 
      • Specific elements - Match heights of specific elements. Note: If anything other than Column is selected, they must be direct children of the Columns. 
        • 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. 
      • With class name - Match the heights of child elements with the same class name.

    For examples, see Match heights demos.

      To match the heights of multiple elements or heavily nested elements, use Match height with class name.

      'Container type' elements - Match heights

      'Container type' elements are elements that can contain child elements. These are not limited to containers, it also includes elements like Paragraph, Heading and Link. All of these elements share these match heights options:

      • Match heights - Match the height of the element or child elements using:
        • None - Removes the match heights at the specific breakpoint
        • Class - Match the height of the element with another element with the same class name
        • Children with class - Match the heights of any child elements with the same class name
        • Child element - Match the heights of all child elements of the same type.

      'Non container type' elements - Match heights

      'Non container type' elements are elements that cannot contain child elements. For example, the WYSIWYG element. All of these elements share these match heights options:

      • Match heights - Match the height of the element using:
        • None - Removes the match heights at the specific breakpoint
        • Class - Match the height of the element with another element with the same class name
      Cohesion DX8 Help center

      Launch our Help center to raise a support ticket or search our knowledge base of common questions and answers.

      DX8 knowledge base icon

      Knowledge base

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

      Find answers

      Raise a ticket icon

      Raise a support ticket

      Log in to the Help center to raise an issue. Available Monday - Friday, 09:00 - 17:00 GMT.

      Raise ticket