Dynamically add rows to a flat View grid
// Rules:
// 1. Don't use if you have more than two view modes. I have used this if the grid is only three columns or stacking responsively - if you go down into medium desktops and your columns are outputting in twos for example, you shouldn't use this.
// 2. Don't use if the grid is going to be manipulated dynamically, such as via masonry/Isotope or AJAX filtering.
// Perform this amend in the 'Style' template (such as 'views-view-unformatted').
// Grab the set of rows and use array_chunk to group them by three
<?php $result_rows = array_chunk($rows, 3); ?>
// Initial row grouping, allows you to set the markup around the secondary grouping
<?php foreach ($result_rows as $id => $result_row): ?>
<div class="row">
// This is the common grouping that you would use normally.
<?php foreach ($result_row as $id => $row): ?>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<?php print $row; ?>
</div>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
// What this does is provide a more usable HTML format for Bootstrap grid outputs. Instead of:
<div class="row">
<div class="col-lg-3">column</div>
<div class="col-lg-3">column</div>
<div class="col-lg-3">column</div>
<div class="col-lg-3">column</div>
<div class="col-lg-3">column</div>
<div class="col-lg-3">column</div>
<div class="col-lg-3">column</div>
<div class="col-lg-3">column</div>
</div>
// You should now get instead
<div class="row">
<div class="col-lg-3">column</div>
<div class="col-lg-3">column</div>
<div class="col-lg-3">column</div>
<div class="col-lg-3">column</div>
</div>
<div class="row">
<div class="col-lg-3">column</div>
<div class="col-lg-3">column</div>
<div class="col-lg-3">column</div>
<div class="col-lg-3">column</div>
</div>