Grid Layouts with tablerow
{% tablerow %} wraps items in HTML table rows, breaking into a new row every cols: N items. Before CSS Grid was universal, this was the standard Shopify pattern for product grids. It still appears in legacy themes and email templates.
4-column product table
<table class="product-grid">
{% tablerow product in collection.products cols: 4 %}
<td class="product-grid__cell">
<a href="{{ product.url }}">{{ product.title }}</a>
</td>
{% endtablerow %}
</table>Modern themes should prefer CSS Grid or Flexbox with a standard {% for %} loop. tablerow outputs <tr> and <td> elements — only use it when you genuinely need table semantics or maintain legacy markup.
Tip: For new Online Store 2.0 sections, use display: grid in CSS with {% for product in collection.products %} — it is more flexible and accessible.