CSS Container Query Generator

/* CSS Container Queries */

/* Container Setup */
.card-container {
  container-name: card-container;
  container-type: inline-size;
}

/* Base Styles */
.card-container-content {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Container Queries */
@container card-container (min-width: 400px) {
  .card-container-content {
    display: flex;
    flex-direction: row;
    gap: 1rem;
  }
}

@container card-container (min-width: 600px) {
  .card-container-content {
    padding: 2rem;
    font-size: 1.25rem;
  }
}

/* Fallback for browsers without container query support */
@supports not (container-type: inline-size) {
  .card-container-content {
    /* Add fallback styles using media queries or fixed values */
  }
}

<div class="card-container">
  <div class="card-container-content">
    <!-- Your content here -->
    <h3>Container Query Demo</h3>
    <p>Resize the container to see styles change</p>
  </div>
</div>