Search code examples
javascriptcsslayouttiling

CSS make divs of various heights and widths take as little space as possible by "nestling"


Hi I am trying to make a bunch of divs of various heights float into the optimum position to take up as little space as possible collectively. I have tried using inline blocks with the vertical-align set to top as well as floating everything to the left. The divs are nestling(sort of) but leaving large gaps from time to time. Is there a way with css (or javascript if necessary) to organize these divs together like tiles without gaps? (or the smallest gaps possible)

thanks


Solution

  • Or take a shine to Masonry's bigger sister Isotope. On top of Masonry, she's got many other tricks up her sleeve, such as sorting and filtering items and much more.