Zum Hauptinhalt springen
Kontakt YouTube XING
Diese Webseite nutzt Cookies

Diese Webseite nutzt Cookies zur Verbesserung des Erlebnisses unserer Besucher. Indem Sie weiterhin auf dieser Webseite navigieren, erklären Sie sich mit unserer Verwendung von Cookies einverstanden. Mehr

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, select class "Equal height for Columns" in setting "Wrap Content Element" in tab "Appearance".
If the columns should be collapsed on smaller devices, you have to select one of the classes "Equal height for Columns: Reset on..." (depends on the screen size the grids should be collapsed).

Attention:

  1. The content element inside the equal height grid should not have "No frame" selected.
  2. 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.