Grids with equal height

This page demonstrates grids, where each column has the same height.

Hint: This feature is for advanced users only, because it is not easy to configure and you have to take care about reset in mobile view.

Configuration: To activate equal height grids, activate the checkbox for field "Wrap Content Element" and add "eq-height" to field "Class for Wrapped Element". If the columns are collapsed on smaller devices, you also have to add "eq-height-reset-xs", "eq-height-reset-sm" or "eq-height-reset-md", which depends on the screen size the grids are collapsed.

Attention: Very long words may influence the width of the boxes. To prevent that, use the button "soft hyphen" of the RTE.

2 columns 50% 50% (desktop only)

Column 1

Sed lacus urna; fringilla a porta in, pretium sit amet sapien. Praesent veeeeeeeeeeeeeery­looooooooooooooong­woooooooooooooooooooooord quis lorem lectus, et malesuada quam. Etiam ullamcorper lorem eu orci varius eu pretium lectus cursus. Vestibulum a tellus metus. Nulla sit amet purus lectus, sed tempor augue.

Column 2

Sed lacus urna; fringilla a porta in, pretium sit amet sapien. Praesent quis lorem lectus, et malesuada quam. Etiam ullamcorper lorem eu orci varius eu pretium lectus cursus. Vestibulum a tellus metus. Nulla sit amet purus lectus, sed tempor augue. Aenean sed egestas diam. Duis placerat vulputate lacus, non cursus odio rhoncus ac! Fusce rhoncus neque et ante auctor ornare. Duis commodo, purus a vestibulum hendrerit, neque mi convallis velit, quis commodo velit odio vel risus. Nulla facilisi. Maecenas a ipsum leo. Pellentesque porttitor porta eleifend.

2 columns 50% 50% (even on smartphones)

Column 1

Sed lacus urna; fringilla a porta in, pretium sit amet sapien. Praesent veeeeeeeeeeeeeery­looooooooooooooong­woooooooooooooooooooooord quis lorem lectus, et malesuada quam. Etiam ullamcorper lorem eu orci varius eu pretium lectus cursus. Vestibulum a tellus metus. Nulla sit amet purus lectus, sed tempor augue.

Column 2

Sed lacus urna; fringilla a porta in, pretium sit amet sapien. Praesent quis lorem lectus, et malesuada quam. Etiam ullamcorper lorem eu orci varius eu pretium lectus cursus. Vestibulum a tellus metus. Nulla sit amet purus lectus, sed tempor augue. Aenean sed egestas diam. Duis placerat vulputate lacus, non cursus odio rhoncus ac! Fusce rhoncus neque et ante auctor ornare. Duis commodo, purus a vestibulum hendrerit, neque mi convallis velit, quis commodo velit odio vel risus. Nulla facilisi. Maecenas a ipsum leo. Pellentesque porttitor porta eleifend.