Comparison Grid Layout

Do you have a CMS-sourced pricing table or product comparator where you need the rows to dynamically match height for an aligned display?

Like this-

Yes it's possible in Webflow, and there are two approaches.

CSS Approach

The CSS sub-grid feature is designed to allow a child grid to utilize its parent grid's layout rules, and is widely supported by modern browsers.

Demo
https://layout-demos.webflow.io/comparison-grid-layout

Cloneable
https://webflow.com/made-in-webflow/website/layout-demos

References

https://css-tricks.com/achieving-vertical-alignment-thanks-subgrid/

Here's a Codepen example of the row-height-matching;

https://codepen.io/memetican/pen/BagJbBq/b7dd2ba61a891323a8c7625f343abea1

JS Approach

Another approach is to have JS compare your two collection lists, and determine the ideal row heights exactly, row by row.

Jason Roach gives an excellent demo of this;

Example - https://equal-height-rows-with-dual-cms.webflow.io/

Cloneable - https://webflow.com/made-in-webflow/website/equal-height-rows-with-dual-cms

Comparison Notes

CSS approach;

• + works in the designer
• + requires no extra code
• - requires you to know the row count in advance
• - requires a small bit of "workaround" CSS to suppress the layout impact of the collection list div container elements.

Discussion;

https://www.facebook.com/groups/311973022648711?multi_permalinks=2000757460436917&hoisted_section_header_type=recently_seen

‍