0

I'm using Bootstrap's grid system to display groups of panels of variable height in a fluid container.

The number of panels is varying and also each of the panels heights.

My goal is to have three columns on lg and md viewports, two columns on sm viewports and one column on xs viewports.

Each panel is defined within the following column:

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">

I'm currently using Boostrap's continuous column wrapping (all columns in one row) to achieve my goals combined with a clearfix class where needed.

My problem is the vertical gutter space between the columns, I want to get rid of any vertical gap and align each column to the column above it even though they are from a different row.

I also want each panel width to be responsive to the current viewport, for instance, on xs viewports there should be single column and each panel would take up the entire width of the viewport.

As far as I understand Bootsrap's grid system, this is just not feasible, but any help / further clarifications / new directions would be much appreciated.

BTW - I don't care about the column ordering, and optimally I would like to reach a minimal total container height with no gutter space between columns.

Here's an updated example jsFiddle with some illustrations of the gaps, adapted to show three columns on xs.

Niro
  • 314
  • 1
  • 4
  • 25
  • Thanks for your reply Skelly. I tried changing to the masonry CSS method but couldn't get it to work as my panels width becomes fixed and non-responsive, maybe I'm missing something... – Niro Apr 20 '16 at 10:30
  • Please reopen as its not a duplicate, I don't see how the masonry approach can solve this. – Niro Apr 20 '16 at 11:16
  • 1
    Your only solution is Masonry or some other equivalent JS. This cannot be done with CSS only. – Sergiu Paraschiv Apr 20 '16 at 14:10
  • Masonry combined with Boostrap's media query classes did the trick. Thanks – Niro Apr 21 '16 at 12:03

0 Answers0