# Equal Height Rows ❺🧪

## 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