metallissimus wrote:Since the most common ratio in photographs is probably 3:2, couldn't you use a smaller square "base grid" and assign 6 squares to each image, so the ratio doesn't change? Square images would also fit nicely (4 squares), as would n:1 panoramas. 4:3, 16:9 and anything odd will of course still be cropped.
In short, yes and I'm impressed by your thinking. 6 squares is perhaps a bit much, but why not just 3? Then we can assign 3:2 for landscape, 2:3 for portrait and 2:2 or 3:3 for square. The reason I would limit the grid cells, is for performance reasons, and to keep things more intuitive in regards to settings and customizing the grid (which can be done from CSS), and to minimize the chances of "gaps" in the grid.
Aspect ratio classes
As mentioned earlier, the grid itself doesn't know (and doesn't care) about the size and aspect of images inside. Instead, as in the
demo, I need to assign CSS classes (for example "img-square", "img-vertical" and "img-horizontal") to each element up front, based on the calculated aspect ratio each image. We can then style each class to occupy multiple rows and/or columns by CSS. The classes created from aspect are just approximate ... For example, in the demo I assign img-horizontal only if the ratio > 1.3, and img-vertical if the ratio < 0.8, else we end up with square-looking images spanning multiple columns or rows (looks less appealing than square for "squarish" images). One could of course go even further and create FIVE aspect classes (ultra-narrow, narrow, square, wide, ultra-wide), but it gets complicated assigning col/row spans for each class, and I think we are asking for more than
CSS Grid is essentially designed for.
Empty grid gaps
One thing that starts happening as soon as you create different row-spans and col-spans, is that you will start getting empty gaps in the grid. I am not 100% sure how the grid deals with gaps, but it does try it's best to fill empty areas, although it won't entirely change the order of items. It seems almost like Tetris. When you use basic 2X row and column spans (like in the
demo), it works nicely (perhaps perfectly) because all grid items are simply multiplications of 2. Once you start with 3/2 and 2/3 row and col spans, you will start getting empty "gaps" that the grid fails to occupy ... In my opinion, this is not a huge problem at all, but it is a compromise. Once col/row spans get more complex, more gaps will appear.
I'll do some more tests soon.
