Breaking rows in a responsive tiled gallery

[Junitar]

Hi,

 

I'm making a responsive centered tiled gallery for my website. For aesthetic reasons, I only need to have a margin between the images. To do so, I set a left margin to each elements but the first, in each row, using the :nth-child() selector. I got it to work as I wanted to but I'm now facing a problem with the image captions which break the floating elements if I enter too many words in them. Please, see the jsfiddle example here: https://jsfiddle.net/0w379712/

How can I do to prevent this? Ideally, I would like to have the entire row going down if there's too much text above. I thought a clear: left in the last-child of the row would fix this but it's not working.

 

Also, would you recommend to use the :nth-child() or :nth-of-type() selector to achieve this? I've analysed several web galleries with similar mosaic and none of them used these kind of selectors. Probably for browser compatibility reasons, but can't say for sure.

 

Edit: I finally managed to fix the problem using .tile:nth-child(2n+1) / .tile:nth-child(3n+1) { clear: left }, I messed up with the syntax of the selector in my previous attempts…

Edited February 9, 2017 by Junitar