Jump to content

Breaking rows in a responsive tiled gallery


Recommended Posts



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 by Junitar
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...