Create responsive 3-column grid with toggle option

by sthag

HTML

<div class="flex-container">
  <div class="flex-item">Item 1 (click to hide)</div>
  <div class="flex-item">Item 2 (click to hide)</div>
</div>

CSS

.flex-container {
  display: flex;
  gap: 1rem;
}

.flex-item {
  flex: 1;
  background: #3498db;
  padding: 2rem;
  border-radius: 8px;
  color: white;
  overflow: hidden;
  transition: flex 0.3s ease, min-width 0.3s ease;
  min-width: 0; /* Important for flex shrinking */
}

.flex-item.hidden {
  flex: 0;
  min-width: 0;
}

JavaScript

document.querySelectorAll('.flex-item').forEach(item => {
  item.addEventListener('click', function() {
    this.classList.toggle('hidden');
  });
});