Foundation Text Grid - css

Question

I'm trying to create a grid with text, not images, similar to the 'content section' in the Zurb template: http://foundation.zurb.com/templates/orbit.html
I would like to create three blocks of text on each row.
I am able to create this, but the problem that arises is that sometimes in my data there is only one or two blocks of text for a row.
For example, if a product is missing it's location, is there a way to move ingredients to take the place of location, or if category and location are missing to move ingredients to the place of category?
I'm using Ruby on Rails and Foundation 5.
Thanks!
<div class="row">
<div class="large-4 columns">
<% unless #product.category.nil? %>
<div class="product-heading">Product Category</div>
<div class="product-value">
<%= #product.category %>
</div>
<% end %>
</div>
<div class="large-4 columns">
<% unless #product.location.nil? %>
<div class="product-heading">Product Location</div>
<div class="product-value">
<%= #product.location.sort.join(", ") %>
</div>
<% end %>
</div>
<div class="large-4 columns">
<% unless #product.ingredients.nil? %>
<div class="product-heading">Product Ingredients</div>
<div class="product-value">
<%= #product.ingredients.sort.join(", ") %>
</div>
<% end %>
</div>
</div>
HTML generated from Max Williams' suggestion.
<div class="row">
<div class="large-4 columns">
<div class="product-heading">Product Category</div>
<div class="product-value">Food </div>
</div>
<div class="large-4 columns">
<div class="product-heading">Product Ingredients</div>
<div class="product-value">Flour, Sugar </div>
</div>
</div>
Javascript to try and remove empty li tag
<script>$('li, p')
.filter(function() {
return $.trim($(this).text()) === '' && $(this).children().length == 0
})
.remove();
</script>

Answer 1

The key is to look for repeated elements, and abstract them out, for example by using a loop. eg
<% product_cells = [["Category", #product.category], ["Location", #product.location_string], ["Ingredients", #product.ingredients_string]] %>
<div class="row">
<% product_cells.each do |title, data| %>
<% unless data.blank? %>
<div class="large-4 columns">
<div class="product-heading">Product <%= title %></div>
<div class="product-value"><%= data %> </div>
</div>
<% end %>
<% end %>
</div>
Note that i've put the test in a different place, so the whole large-4 div is skipped if the data is blank.
This sort of thing #product.location.sort.join(", ") should usually be replaced with a method in the Product model, eg
#in Product
def location_string
self.location.reject(&:blank?).sort.join(", ")
end
def ingredients_string
self.ingredients.reject(&:blank?).sort.join(", ")
end
then you could change the above code to
<% product_cells = [["Category", #product.category], ["Location", #product.location_string], ["Ingredients", #product.ingredients_string]] %>
EDIT: changed string methods to cope with nils
EDIT2: changed my original answer to use the model methods i added.