I am just trying to work out the best way to do a fluid panel layout where the panels have the same height as their width using XY Grid or flexbox if possible:
The solution must be able to meet the following where each panel needs to be able to:
- Responsive maintaining width/height rations as per above while taking the entire width of the viewport
- The full panel is a href and clickable (a background image will be applied)
- Be able to use motion UI so when the panels come into view they scale-in-up from 0% to fill their space
The way I was thinking about attacking it is having the cell height controlled by the parent width using padding-bottom: 50% etc which should set the height based on the width. Then absolute positioning the <a> tag within the cell setting width and height to 100%.
But are there any better ways of doing this using XY Grid or flexbox features?