CODEWITHSUNDEEP
jquerycsszurb-foundation
aahhaa
aahhaa

Reputation: 2275

fix Zurb Foundation Grid with different height

Foundation's Grid break when there are "uneven" hight to each columns, especially if all inside one row. as you can see from the Jsfiddle example below.

I don't want to use equalizer since it cause real performance issue for my site.

I don't know how many column will be produce by my PHP code so I can't really put it in separate row.

any one have a solution to this?

[edit] currently my solution involve predefine max col per row, and use a counter to end and start a new row. but it's not very responsive.

https://jsfiddle.net/eq2q4rc4/

var col = '<div class="small-3 columns">content</div>', 
		row = $('.row'), 
    colCount = 30,
    i = 0, 
    maxRange = 1000; 
    
    for(i=0; i<colCount; i++) {
    	row.append(col);
    }
    
    $('.columns').each(
    	function() {
      	$(this).css({'height':Math.floor((Math.random() * 100) + 1)});
      }
    ); 
.columns {
  background-color: red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row">

</div>

Upvotes: 0

Views: 392

Answers (1)

mattferderer
mattferderer

Reputation: 974

Changing Foundation to use the flex grid https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation-flex.min.css with your code should get you better results. https://jsfiddle.net/k07wktgL/1/

var col = '<div class="small-3 columns">content</div>', 
    row = $('.row'), 
    colCount = 30,
    i = 0, 
    maxRange = 1000; 
    
for(i=0; i<colCount; i++) {
    row.append(col);
}
    
$('.columns').each(
        function() {
        $(this).css({'height':Math.floor((Math.random() * 100) + 1)});
    }
); 
.columns {
   background-color: red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation-flex.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row"></div>

Upvotes: 1

Related Questions