Monday, September 2, 2019

tightly packing uneven squares via CSS (or js)

Like I've mentioned One of the toughest part of Porchfests is making the printable poster guide. Although I wish everyone would just use my groovy mobile sites, apparently many people feel more comfortable with a piece of paper - but it's a lot of information to try to pack into just a few sheets.

For JP Porchfest I used a block schedule:

However, Belmont Porchfest tends to have only one band per porch, so this kind of layout wastes a lot of space.

Also... just having band names isn't that appealing to be honest. What if we could get the band descriptions in there as well? Would that make a more appealing display? Let people really get a feel for what they want to see?

I tried using inline-block and then float, and got something like this:
It wasn't quite what I had in mind... I'd really love something to make better use of the space.

This stackoverflow question pointed me to http://isotope.metafizzy.co/ - their default "masonry" layout provided me something like
That seems much more likely to make a better use of space!

No comments:

Post a Comment