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
