Wrap Div Around Each Set of 3 Columns with Loop

I would like to create a WordPress loop that wraps a DIV around each set of 3 columns. Essentially, I want this to be the loops output:

<div class="row"> // This row does have 3 sets of columns, so it will create another row
    <div class="large-4 medium-4 columns panel grid">
    <--Content Stuff-->
    </div>
    <div class="large-4 medium-4 columns panel grid">
    <--Content Stuff-->
    </div>
    <div class="large-4 medium-4 columns panel grid">
    <--Content Stuff-->
    </div>
</div>
<div class="row"> // Since this row doesn't have three sets of columns, so it does not create another row
    <div class="large-4 medium-4 columns panel grid">
    <--Content Stuff-->
    </div>
    <div class="large-4 medium-4 columns panel grid">
    <--Content Stuff-->
    </div>
</div>

Here is my current loop code:

<?php $i = 1; ?>
<?php query_posts('cat=-4'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div class="row">
    <div class="large-4 medium-4 columns panel grid">

        <--Content Stuff-->

    <?php if ($i % 3 == 0) {echo '</div></div><div class="row"><div class="large-4 medium-4 columns panel grid">';} ?>

    <?php $i++; endwhile; endif; ?>

    </div> <!-- end .panel -->
</div>      

<?php else : ?>
<?php get_template_part( 'partials/content', 'missing' ); ?>
<?php endif; ?>

However, this ends up rendering a completely blank page which leads me to believe i have PHP errors – I just don’t know where.