Equal Height Rows ❺🧪

Complex grid layouts

Equal Height Rows

Goals;

• Support equal-height rows

• Make it responsive, so that this calculation is only performed on specific breakpoints

• Can be applied to any element, the children will be considered rows

  • Does not explicitly need to be a grid

• Mobile view?

Technical Notes

Approaches;

Calc

• Identify all grids with same name

• Determine largest row height of each, per item, and adjust others

  • Apply as style height

• Must re-adjust on any resize

• Must remove on breakpoints where we do not want this

Subgrid

• Must set rows of parent grid based on child grid max?

• Must suppress collection list layout elements of child grids to allow alignment

Set rows

Layout to Grid ( move elements )

wfu-grid-equalheightrows = ( name )

All elements with the matching name will be set as equal height rows

Missing elements? Create, ignore

`wfu-grid-equalheightrows:bp = ( breakpoints )

d,t

Process