Menu icon Foundation
Fluid width square panel layout with XY Grid

Hi folks,

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?

Thanks,

xy grid

Hi folks,

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?

Thanks,