Gallery: Fix column widths in gallery block.

[gonzomir]

The widths of columns have wrong calc() expressions, which causes more images to fit in a row than set in the "Columns" setting of the block.

This should fix #2465

[karmatosed]

First, with this patch I don't see any difference when looking with it applied or not, for example on a gallery of 7 items:

Is there some step I can trace to see this? Does it rely on a number or rows? I'd love to see the impact and recreate between the two. That all said, the PR doesn't break anything.

[gonzomir]

Sorry for not providing more details, I thought the issue will give enough information. Anyway, here's a gallery with 20 pictures, 5 in a row (so there must be 4 rows, all images the same size):

Before:

And after:

The problem becomes more prominent with a greater number of columns, because the calc() expressions subtract greater amounts from the width of the items, while it should always be the sum of the horizontal margins (16px in this case).

[mtias]

This looks good, thanks!

[nb]

Good fix, @gonzomir – I have no idea how that mess got in :) One possible improvement would it be to extract the margins in a variable – it would make it a bit easier to follow.

[gonzomir]

If the variable can be shared between components, It'll probably allow for more consistent styles. And also the calc() expressions can be joined in a mixin that generates all the columns CSS - like "give me maximum 8 columns for this base class". I'm not sure however how such approach fits in a independent components philosophy.