Filter Catalog

Aside filter fieldsets beside a product grid; stack on narrow viewports.

Browse with filters

This lesson is static layout only. Filtering with script belongs to JavaScript later.

Results

Showing 6 sample products

Important pattern

Group related filters with fieldset and legend. The grid stacks under the aside on narrow screens.

<div class="catalog-layout">
  <aside class="filter-aside">
    <fieldset><legend>Availability</legend>...</fieldset>
  </aside>
  <div class="product-grid">...</div>
</div>