CSS Container Query Builder

Build CSS container queries with visual configuration

@450PX BREAKPOINT

Container Specifications

Container Name:

Container Type:

Breakpoint (px):450px

Styles below 450px (Default):

Styles @container (min-width: 450px):

CSS Output & Interactive Preview

Preview Container Width:500px (Above Breakpoint)

.product-card .content

State: @container >= 450px ACTIVE

.product-card {
  container-type: inline-size;
  container-name: product-card;
}

.product-card .content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@container product-card (min-width: 450px) {
  .product-card .content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
  }
}