1

Aspect ratio grid - now with variable ratios!

Current ratio: 16:9

I noticed that using the CSS aspect ratio hack was causing issues with CSS Grid (when I needed all grid cells to be a 1:1 aspect ratio but some grid children to span more than one cell) so this is a solution with CSS Variables and a sprinkling of calc() instead. It does rely on knowing the outer width of the wrapper though (doesn’t work as a percentage value).

If you change the wrapper and / or gutter variables you’ll see the blocks still maintain their aspect ratio except where the content in longer than the block, then they grow to fit.

Some other solutions here by Chris Coyier.

2
3
4
5
6
7
8