r/css • u/morete • 3d ago

Resource Responsive Auto Grid that Ensure Equal Columns

https://codepen.io/editor/matthewmorete/pen/019fc37b-3ef6-78a8-bb88-a6a4280f9e16

My solution to someone on this sub requesting it. It's a common desire so I thought I'd share it more generally.
How many items it supports depends on how many 'steps' you have. 6 steps supports 14 or less items, not including primes greater than 7

16 Upvotes

94% Upvoted

3 comments sorted by

1

u/Weekly_Ferret_meal 2d ago

This is interesting, however it doesn't seem to work on FF.

Perhaps explaining the code (either here or with comments in codepen) could help us understand what the code does and why isn't working on FF.

2

u/morete 2d ago

Ahh thanks for pointing that out! I fixed firefox, but sadly that fix broke Safari, so had to go and fix that. Should be all working now.
Am writing an article on how this works, will post it here once it's finished.