v149 · css

Filter Row

An e-commerce filter panel where flex-wrap: balance distributes category chips evenly across rows — no orphaned single chips on the last line. Toggle between wrap and balance to see the difference.

Feature detection: checking…
flex-wrap:
Product filters flex-wrap: balance
Category
✓ Electronics
✓ Photography
✓ Computers
✓ Office Supplies
✓ Tablets
✓ Wearables
✓ Gaming & Consoles
✓ Networking
✓ Smart Home & IoT
✓ Audio
✓ Monitors
Brand
✓ Apple
✓ Samsung
✓ Sony
✓ Bose
✓ Microsoft
✓ Logitech
✓ Google
✓ Panasonic
✓ Dell Technologies
✓ Lenovo
Price range
✓ Under $25
✓ $25 – $50
✓ $50 – $100
✓ $100 – $250
✓ $250 – $500
✓ $500 – $1000
✓ Over $1000
0 filters active Click chips to select

wrap vs balance — same 11 tags

flex-wrap: wrap
Electronics
Photography
Computers
Tablets
Wearables
Gaming
Networking
Smart Home
Audio
Monitors
Accessories
flex-wrap: balance
Electronics
Photography
Computers
Tablets
Wearables
Gaming
Networking
Smart Home
Audio
Monitors
Accessories
/* Filter row: distribute chips evenly across rows */
.filter-chips {
  display: flex;
  gap: 0.4rem;
  flex-wrap: balance; /* evenly distributed, no orphans */
}

/* Falls back to normal wrap in older browsers */
.filter-chips {
  flex-wrap: wrap;      /* baseline */
  flex-wrap: balance;   /* enhancement */
}

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗