Match the heights of elements

Only use this feature when you cannot achieve what you require using CSS. This feature uses javascript to match the heights of elements that share a class or element type. You can often achieve the same result using CSS Flex properties. Using CSS will perform better than javascript.

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.

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