Making a grid with constant square cells and bounds

Hi all,

With my first site here (portfolio), I have sections of references and concept images in grids that I’d like to have displayed within equal responsively sized but constantly squared bounds. I built a grid with a 4x4 layout contained within a 0px double 50% padded div with absolute contents, as that seems to be the only way to force the grid to become square. Then contents are placed to fit in those cells or span them proportionally.

However, then problems arise as I try to reconfigure the layout responsively for mobiles. The individual cells lose their squareness, or the contents shrink or grow out of bounds. My knowledge of html is simple and grids definitely wasn’t part of it until now. No amount of tweaking the grids from fr to % or messing with max-width/height or switching the static/absolute bounds seems to help. I baffles me that I can’t just have a grid that fills the exact full size of the cell boundary without distorting the shape of the cells or entire grid!

Thanks to anyone who can help me puzzle this out.
My troublesome element is:

‘realm-rule_images-layout’


Here is my site Read-Only:

https://preview.webflow.com/preview/snacuum-design?utm_medium=preview_link&utm_source=designer&utm_content=snacuum-design&preview=50ff8047d448b36ce6f40622b52d3155&pageId=625ec9ae2af44ba856a2ba16&workflow=preview

and my published:

The Elemental Realms - Sigils

EDIT—

The only solution I found was to use combo-classes to modify the specific grids and modify the amount in the padding-only div. It was something I was attempting to avoid as I’m using he Finsweet Client-First design style and excessive combo-classes are discouraged. That said, it wasn’t too many and gave me an ok result for level of competence.

hi @Snacuum you can use aspect-ratio that is supported in all browsers.
here is short how to video.

Hope this will solve your request.