ContainerForge Studio — CSS Container Queries @container Studio

📦 Container Query Controls

Container Name

Container Breakpoint: 400px

Generated CSS @container Code

.card-wrapper {\n  container-type: inline-size;\n  container-name: card-container;\n}\n\n@container card-container (min-width: 400px) {\n  .card {\n    display: flex;\n    gap: 1.5rem;\n  }\n}

✨ Live Resizable Container Preview

📦

Dynamic Card Element

Resize container parent to trigger @container inline-size query breakpoints live!

📦 Container Query Controls

✨ Live Resizable Container Preview

Dynamic Card Element

✨ Unlock Full CSS @container & cqw Units Component Kit