Skip to content

Instantly share code, notes, and snippets.

@sebinsua

sebinsua/chip-bag.css

Created June 26, 2025 14:51
Show Gist options
  • Save sebinsua/6593bd9e9631bdc2ca8d0cc59e18fb23 to your computer and use it in GitHub Desktop.
Save sebinsua/6593bd9e9631bdc2ca8d0cc59e18fb23 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
chip-bag.css
/* Perfect Solution: Space-Between + Spacer */
.chipbag {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.4rem 1rem;
}
.chipbag::after {
content: "";
flex: auto; /* absorbs extra space on last row */
}
/* Shared chip styles */
.chip {
flex: 0 1 auto;
min-inline-size: 6ch;
max-inline-size: 20ch;
padding: 0 .75em;
border-radius: 9999px;
/* Prevent text wrapping */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Raw
chip.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Perfect Chip Layout Solution</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
padding: 2rem;
background: #f5f5f5;
margin: 0;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
color: #333;
margin-bottom: 1rem;
}
.description {
margin-bottom: 2rem;
color: #666;
line-height: 1.6;
}
/* Perfect Solution: Gap + Spacers */
.chipbag {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.4rem 1rem; /* row-gap column-gap - ensures minimum horizontal gaps! */
}
.chipbag::after {
content: "";
flex: auto; /* absorbs EXTRA space beyond the gaps */
}
/* Collapsible Group Styling */
.grouped-chips {
background: #fafafa;
border-radius: 8px;
overflow: hidden;
}
.chip-group {
border-bottom: 1px solid #e0e0e0;
}
.chip-group:last-child {
border-bottom: none;
}
.group-header {
display: flex;
align-items: center;
padding: 0.75rem 1rem;
background: #f5f5f5;
cursor: pointer;
user-select: none;
transition: background-color 0.2s ease;
font-weight: 500;
color: #555;
}
.group-header:hover {
background: #eeeeee;
}
.group-icon {
margin-right: 0.5rem;
font-size: 0.8rem;
transition: transform 0.2s ease;
color: #666;
}
.group-title {
flex: 1;
}
.group-count {
font-size: 0.85rem;
color: #999;
font-weight: normal;
}
.group-content {
padding: 1rem;
background: white;
transition: all 0.3s ease;
max-height: 500px;
overflow: hidden;
}
.chip-group.collapsed .group-content {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
}
.chip-group.collapsed .group-icon {
transform: rotate(-90deg);
}
/* Experiment: Space-Around Alternative */
.chipbag-around {
display: flex;
flex-wrap: wrap;
justify-content: space-around; /* equal space around each item */
gap: 0.4rem 1rem;
}
/* Experiment: Space-Evenly Alternative */
.chipbag-evenly {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly; /* equal space between all gaps */
gap: 0.4rem 1rem;
}
.chip {
flex: 0 1 auto;
min-inline-size: 6ch;
max-inline-size: 20ch;
padding: 0 .75em;
margin: 0; /* gap handles spacing now */
border-radius: 9999px;
/* Styling */
background: #e3f2fd;
color: #1976d2;
border: 1px solid #bbdefb;
font-size: 0.9rem;
line-height: 2.2;
cursor: pointer;
transition: all 0.2s ease;
/* CRITICAL: Prevent text wrapping and handle overflow */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chip:hover {
background: #bbdefb;
transform: translateY(-1px);
}
.chip.category-food {
background: #f3e5f5;
color: #7b1fa2;
border-color: #ce93d8;
}
.chip.category-tech {
background: #e8f5e8;
color: #388e3c;
border-color: #a5d6a7;
}
.chip.category-design {
background: #fff3e0;
color: #f57c00;
border-color: #ffcc02;
}
.section {
margin-bottom: 2rem;
}
.section h2 {
color: #555;
margin-bottom: 1rem;
font-size: 1.1rem;
}
.resize-demo {
resize: horizontal;
overflow: auto;
border: 2px dashed #ccc;
padding: 1rem;
min-width: 200px;
max-width: 100%;
background: #fafafa;
}
.resize-hint {
font-size: 0.8rem;
color: #999;
margin-bottom: 0.5rem;
}
</style>
</head>
<body>
<div class="container">
<h1>Perfect Chip Layout Solution</h1>
<div class="description">
This solution gives you the best of both worlds: full rows spread edge-to-edge while partial rows stay left-aligned with consistent minimum gaps.
</div>
<div class="section">
<h2>Collapsible Grouped Chip Lists</h2>
<div class="resize-hint">↔️ Click headers to expand/collapse sections</div>
<div class="resize-demo">
<div class="grouped-chips">
<div class="chip-group">
<div class="group-header" onclick="toggleGroup(this)">
<span class="group-icon">▼</span>
<span class="group-title">Grouping Fields</span>
<span class="group-count">(3)</span>
</div>
<div class="chipbag group-content">
<div class="chip category-design">Region Grouping</div>
<div class="chip category-design">Product Category</div>
<div class="chip category-design">Time Period Grouping</div>
</div>
</div>
<div class="chip-group">
<div class="group-header" onclick="toggleGroup(this)">
<span class="group-icon">▼</span>
<span class="group-title">Column Fields</span>
<span class="group-count">(6)</span>
</div>
<div class="chipbag group-content">
<div class="chip category-tech">pWing/1.0</div>
<div class="chip category-tech">pWing/1.1</div>
<div class="chip category-tech">pWing/1.2</div>
<div class="chip category-tech">Super Extremely Long Field Name</div>
<div class="chip category-tech">riskFactorDelta_T1</div>
<div class="chip category-tech">positionValue_USD</div>
</div>
</div>
<div class="chip-group collapsed">
<div class="group-header" onclick="toggleGroup(this)">
<span class="group-icon">▶</span>
<span class="group-title">Calculated Fields</span>
<span class="group-count">(4)</span>
</div>
<div class="chipbag group-content">
<div class="chip category-food">Daily P&L</div>
<div class="chip category-food">Risk Adjusted Return</div>
<div class="chip category-food">Portfolio Beta</div>
<div class="chip category-food">Sharpe Ratio</div>
</div>
</div>
</div>
</div>
</div>
<div class="section">
<h2>Skills & Technologies</h2>
<div class="chipbag">
<div class="chip category-tech">JavaScript</div>
<div class="chip category-tech">React</div>
<div class="chip category-tech">CSS</div>
<div class="chip category-tech">Node.js</div>
<div class="chip category-design">Figma</div>
<div class="chip category-design">UI/UX</div>
<div class="chip category-tech">TypeScript</div>
<div class="chip category-tech">Python</div>
<div class="chip category-design">Design Systems</div>
<div class="chip category-tech">API Development</div>
</div>
</div>
<div class="section">
<h2>Food Preferences</h2>
<div class="chipbag">
<div class="chip category-food">Pizza</div>
<div class="chip category-food">Sushi</div>
<div class="chip category-food">Mediterranean</div>
<div class="chip category-food">Thai</div>
<div class="chip category-food">Mexican</div>
<div class="chip category-food">Italian</div>
<div class="chip category-food">Vegetarian Options</div>
<div class="chip category-food">Seafood</div>
<div class="chip category-food">BBQ</div>
</div>
</div>
<div class="section">
<h2>Experiment: Space-Around vs Space-Evenly</h2>
<div class="resize-hint">↔️ Try these alternatives that add space at the edges too</div>
<h3 style="margin-top: 1.5rem; margin-bottom: 0.5rem; font-size: 1rem; color: #666;">Space-Around (equal space around each item)</h3>
<div class="resize-demo">
<div class="chipbag-around">
<div class="chip">Short</div>
<div class="chip">Medium Length</div>
<div class="chip">Very Long Chip Name</div>
<div class="chip">Tiny</div>
<div class="chip">Another Medium One</div>
<div class="chip">Super Extremely Long Chip</div>
<div class="chip">Small</div>
<div class="chip">Regular</div>
<div class="chip">Space Around Item</div>
</div>
</div>
<h3 style="margin-top: 1rem; margin-bottom: 0.5rem; font-size: 1rem; color: #666;">Space-Evenly (equal space everywhere)</h3>
<div class="resize-demo">
<div class="chipbag-evenly">
<div class="chip">Short</div>
<div class="chip">Medium Length</div>
<div class="chip">Very Long Chip Name</div>
<div class="chip">Tiny</div>
<div class="chip">Another Medium One</div>
<div class="chip">Super Extremely Long Chip</div>
<div class="chip">Small</div>
<div class="chip">Regular</div>
<div class="chip">Space Evenly Item</div>
</div>
</div>
</div>
<div class="section">
<h2>Interactive Demo</h2>
<div class="resize-hint">↔️ Drag the right edge to resize and see how chips reflow perfectly</div>
<div class="resize-demo">
<div class="chipbag">
<div class="chip">Short</div>
<div class="chip">Medium Length</div>
<div class="chip">Very Long Chip Name</div>
<div class="chip">Tiny</div>
<div class="chip">Another Medium One</div>
<div class="chip">Super Extremely Long Chip</div>
<div class="chip">Small</div>
<div class="chip">Regular</div>
<div class="chip">Perfect Last Item</div>
</div>
</div>
</div>
<div class="section">
<h2>The CSS - Collapsible Groups + Perfect Chips</h2>
<pre style="background: #f8f9fa; padding: 1rem; border-radius: 6px; overflow-x: auto; font-size: 0.9rem;"><code>/* Perfect Chip Layout */
.chipbag {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.4rem 1rem;
}
.chipbag::after {
content: "";
flex: auto; /* absorbs extra space on last row */
}
/* Collapsible Groups */
.chip-group {
border-bottom: 1px solid #e0e0e0;
}
.group-header {
display: flex;
align-items: center;
padding: 0.75rem 1rem;
background: #f5f5f5;
cursor: pointer;
font-weight: 500;
}
.group-content {
padding: 1rem;
transition: all 0.3s ease;
max-height: 500px;
overflow: hidden;
}
.chip-group.collapsed .group-content {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
}
/* Shared Chip Styles */
.chip {
flex: 0 1 auto;
min-inline-size: 6ch;
max-inline-size: 20ch;
padding: 0 .75em;
border-radius: 9999px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}</code></pre>
</div>
</div>
<script>
function toggleGroup(header) {
const chipGroup = header.closest('.chip-group');
const icon = header.querySelector('.group-icon');
chipGroup.classList.toggle('collapsed');
if (chipGroup.classList.contains('collapsed')) {
icon.textContent = '▶';
} else {
icon.textContent = '▼';
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment