Container Queries Demo

Drag the right edge of the box below to resize the container. Notice how the card layout changes depending on the container’s width, not the viewport.

Image Box

This card is self‑aware. When the container is wide enough, the “image box” sits beside the text. When the container is narrow, it stacks above the text.

Image Box

Main card: adapts as the main container grows/shrinks.

Code Example


<div class="card">
  <div class="card-content">
    <div class="image-box">Image Box</div>
    <p>This card adapts to its container width.</p>
  </div>
</div>

<style>
  /* Declare the card as a container */
  .card {
    container-type: inline-size;
    border: 1px solid #ccc;
    padding: 1rem;
    background: #f9f9f9;
  }

  /* Default stacked layout */
  .card-content {
    display: block;
  }
  .image-box {
    background: #457b9d;
    color: white;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
  }

  /* Container query: switch to side-by-side when wide enough */
  @container (min-width: 400px) {
    .card-content {
      display: flex;
      gap: 1rem;
      align-items: center;
    }
    .image-box {
      flex: 0 0 200px;
      margin-bottom: 0;
    }
  }
</style>

Container Queries Demo