0

I'm working on a site that has on the homepage various blocks of information. I've been using Bootstrap for the grid, but when a column is taller than the previous one, it creates an entirely new row, leaving empty space in the columns, like so: enter image description here

I know I can remove the space by nesting 2 and 4 in the same column div, but it would be far better for the project if the grid system would automatically nest the columns, like so: enter image description here Is there a grid system that can do this for me?

Update:

Thanks for the Bootstrap cards link, but what I'm looking for is something that specifically puts the first items up top, so that my users can put the most important blocks first, and have those at the top of the page.

Community
  • 1
  • 1
jpyams
  • 2,949
  • 3
  • 29
  • 56
  • You can do this with [**Bootstrap 4 Card Columns**](https://v4-alpha.getbootstrap.com/components/card/#card-columns). – hungerstar Apr 20 '17 at 15:37
  • That's a good option @hungerstar but for th OP layout will be tricky since columns place the items first from top to bottom and then left to right ... I think this expected layout even with masonry will need to tweak the html order – DaniP Apr 20 '17 at 15:41
  • 1
    Possible duplicate of [**Is it possible to create a pinterest-like layout with Bootstrap only?**](http://stackoverflow.com/questions/12570559/is-it-possible-to-create-a-pinterest-like-layout-with-bootstrap-only). This layout request has been asked about many, many times before. – hungerstar Apr 20 '17 at 15:42
  • yea I know @hungerstar but I haven't found a proper well structured answer about all plugin & css possibilities for that layout to have as Favorite and close as duplicate always, I know I have seen one but ... – DaniP Apr 20 '17 at 15:45
  • Meh, there doesn't need to be an answer that has every possibility. Just saying that a simple Google search or search on SO will reveal plenty of solutions and as a result this question is overly redundant. – hungerstar Apr 20 '17 at 15:51

0 Answers0