Proposal: Responsive equal heights 25/75 layout/component

[lyubomir-popov]

Done

Proposal: subgrid responsive equal heights module

Quick and dirty subgrid implementation of the often used 3 column 25/75 layout:

Currently, this is built iwth a min-height to align the 3 collumns regardless of the volume of content in them, but that doesn't work well, as on screens smaller than the fixed width, the height changes constantly as you resize.

A better way would be vto use subgrid, lay thjings on the grid, and rely on css grid to automartically adjust heights.

Warning - the code is quick and dirty, will need cleanup.

QA

• Open demo example
• navigate to /docs/examples/patterns/grid/25-75-responsive-equal-heights
• Make the code nicer :)

Screenshots

[if relevant, include a screenshot or screen capture]

[webteam-app]

Demo starting at https://vanilla-framework-4950.demos.haus

[lyubomir-popov]

one thing, we need to add optional lines in between the rows

[lyubomir-popov]

@bartaz Can we progress this soon, maybe with the help of guest devs? We need the version above, and one with 4 columns for the impending u.c download bubble rebrand: https://www.figma.com/file/cVGimTPHky4h3BPXfrT6GB/24.04-U.com---download-(rebranding)?type=design&node-id=449%3A7832&mode=design&t=vTbKLnIJ1RcvFnM6-1

[lyubomir-popov]

@bartaz mini-spec here https://www.figma.com/file/YNYesRrgkpP9bM3JQbFiXz/Responsive-equal-heights-grid?type=design&node-id=0%3A1&mode=design&t=WirUQeNNrKwkmJiW-1

to summarise: this is a component that displays 3 or for sub-items with some responsive variation. The key idea is to ensure equal heights when content varies. Please see the examples for further details (the above figma link)

Preview:

[bartaz]

Done and released in 4.10