Dynamic Grid of responsive squares:

Asked Dec 05 '20 at 15:42

Active Dec 05 '20 at 15:42

Viewed 22 times

There is a great answer here on "Grid of responsive squares" Grid of responsive squares

, but it is responsive in the sense that if you start with a 3x5 grid, only the squares will grow or shrink to adjust to a different screen size; end result is still a 3x5 grid.

I am looking for both a responsive and dynamic grid, with growing / shrinking squares BUT ALSO the number of columns should adjust accordingly.

For example, you may start with a 3x4 grid, but it can easily adjust to 4x3 or 5x3, or 6x2, etc. As the screen size grows, all squares would grow temporarily to fill in white space, until such time as one more square can fit on a line, and so on.

That's a bit more difficult to implement with HTML5/CSS3 only I think, has anyone come across such a beast or even an answer already on stack overflow?

(What I tried: basic flexbox layout, with flex-wrap:wrap, but does not look good in terms of margins around squares or white space, or no growing/shrinking of squares).

asked Dec 05 '20 at 15:42

joedotnot

4,810
8
59
91

like this: https://stackoverflow.com/a/54125439/8620333? – Temani Afif Dec 05 '20 at 15:48
Ok thank you .. that's more or less it ! How do I close the question, or should I delete it? – joedotnot Dec 05 '20 at 15:56
you are free but you are not obliged to delete the question – Temani Afif Dec 05 '20 at 16:07

Dynamic Grid of responsive squares:

0 Answers0