How to avoid empty cells in a grid?

Question

Please look at the screen:

Could anybody tell me please, how to avoid such an empty cells in the grid? Is there any built-in features in Foundation or do I need to edit css?

Code:

{% extends 'main.html' %}
{% load staticfiles %}

{% block show %}

    <div class="row large-collapse">
        <div class="large-12 columns">

            {% for show in shows %}

                <div class="large-4 columns">
                    <div class="panel">
                        <h4><a href="/shows/get/{{ show.id }}">{{ show.show_name }}</a></h4>
                        <img src="{% static 'app_shows_and_times/images/poster.jpg' %}" width=200>
                        <h6>Genre: {{ show.show_genre }}</h6>
                        <h6>Length: {{ show.show_length }}</h6>
                        <h6>Origin: {{ show.show_origin_country }}</h6>
                    </div>
                </div>

            {% endfor %}

        </div>
    </div>

{% endblock %}

This is template for Django, so Im not sure if it is necessary to use fiddle in this case.

Answer 1

May be it's because your columns don't add to 12. Revise them, and you may want to check Foundation's block-grid

Side note, it would be better to post your HTML code, and even better to make a fiddle