← All elements
<div class="pc-filter">
<div class="pc-filter__chips">
<input type="radio" name="pc-cat" id="pc-f-all" checked>
<label for="pc-f-all">All</label>
<input type="radio" name="pc-cat" id="pc-f-tees">
<label for="pc-f-tees">Tees</label>
<input type="radio" name="pc-cat" id="pc-f-caps">
<label for="pc-f-caps">Caps</label>
<input type="radio" name="pc-cat" id="pc-f-totes">
<label for="pc-f-totes">Totes</label>
</div>
<ul class="pc-filter__grid">
<li data-cat="tees">Linen Tee</li>
<li data-cat="caps">Dad Cap</li>
<li data-cat="totes">Canvas Tote</li>
<li data-cat="tees">Pocket Tee</li>
<li data-cat="caps">Trucker Cap</li>
<li data-cat="totes">Market Tote</li>
</ul>
</div>About this layout
A category filter where radio chips hide non-matching products by styling the grid from a :has() check on the parent, with no JavaScript. Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.