row_start and row_end

row_start and row_end simplifies the code associated with creating item grids.

I have two new tags for you today: row_start and row_end.

I hated the verbosity of one particular segement of our code to do with creating item grids. We want to display our items in a three column grid and we want to wrap each row in some markup to style each row.

To detect if I am at the start of a row, I used to have code like …

1{% modulo dividend: index, divisor: 3, remainder: 1 %}
2  <div class="row">
3{% endmodulo %}

Well, that was too hard for my brain so I now use the row_start tag like this …

1{% row_start cols: 3 %}
2  <div class="row">
3{% endrow_start %}

But that was nothing. Here was the markup I used to do at the end of a row …

1{% if forloop.last %}
2  </div>
3{% else %}
4  {% modulo dividend: index, divisor: 3, remainder: 0 %}
5    </div>
6  {% endmodulo %}
7{% endif %}

Now I use the row_end tag like this …

1{% row_end 3 %}
2  </div>
3{% endrow_end %}

So much cleaner. Just the way we like it!

by Craig Sullivan

18 Feb 2013