ToolHop.

ADVERT

Container Query Builder

Plan component-level breakpoints, preview how layouts respond to container width changes, and copy production-ready CSS container queries with matching markup.

Working preview

Drag the container width to watch the layout respond. Container queries fire based on the element's own size, not the viewport.

Base styles • 1 col • 16px gap • 18px padding≥ 640px • 2 cols • 20px gap • 20px padding≥ 960px • 3 cols • 24px gap • 24px padding
New

Adaptive analytics

Track usage patterns and surface insights that flex with your component.

Usage

Team highlights

Reveal richer summaries as the container grows without duplicating markup.

Tip

Content choreography

Let container queries choreograph density without adding viewport breakpoints.

Container query CSS

.cq-wrapper {
  container-type: inline-size;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.cq-wrapper .card {
  padding: 18px;
  border-radius: 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(26, 26, 26, 0.12));
  box-shadow: var(--shadow-1, 0 18px 38px rgba(15, 23, 42, 0.12));
}
.cq-wrapper .badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--brand, #B3122F) 14%, transparent);
  color: color-mix(in srgb, var(--brand, #B3122F) 70%, #111);
}

/* ≥ 640px */
@container (min-width: 640px) {
  .cq-wrapper {
    gap: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cq-wrapper .card {
    padding: 20px;
  }
}

/* ≥ 960px */
@container (min-width: 960px) {
  .cq-wrapper {
    gap: 24px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cq-wrapper .card {
    padding: 24px;
  }
}

Markup scaffold

<!-- Container query example -->
<section class="feature-panel">
  <div class="cq-wrapper">
    <article class="card">
      <span class="badge">New</span>
      <h3>Adaptive analytics</h3>
      <p>Track usage patterns and surface insights that flex with your layout.</p>
    </article>
    <article class="card">
      <span class="badge">Usage</span>
      <h3>Team highlights</h3>
      <p>Show more detail as space grows &mdash; all from the same component.</p>
    </article>
    <article class="card">
      <span class="badge">Tip</span>
      <h3>Content choreography</h3>
      <p>Let container queries choreograph density without extra breakpoints.</p>
    </article>
  </div>
</section>

How to use this tool

  1. Define base and additional breakpoints with min width, columns, gap, and padding values.
  2. Adjust container width in the live preview to test component-level responsiveness.
  3. Copy generated container-query CSS and optional markup scaffold.

Why container queries

  • Container queries react to component size, not viewport size.
  • One component can adapt across different layout contexts without duplicate code.
  • Breakpoints stay closer to component intent and design tokens.

Usage guidance

  • Keep base styles simple, then layer additional breakpoints incrementally.
  • Use consistent spacing scales for gaps and card padding across breakpoints.
  • Name breakpoints descriptively so comments remain meaningful in shared CSS.

FAQ

Do I need media queries for this output?
Not for component resizing. The generated code uses `@container` rules tied to container width.
Can I add more than three breakpoints?
Yes. You can add and remove breakpoints as needed, then export updated CSS.
Is markup generation required?
No. The markup scaffold is optional and provided as a quick integration starter.

ADVERT

More like this

ADVERT