Container Queries

Style elements based on parent container size

Container queries let components respond to their container size instead of the viewport. Drag the slider to resize.

Style elements based on their parent container size, not the viewport. More modular than media queries.

Container Width

@container (350px)

Image

Card Title

Layout changes based on container width, not viewport.

row layout (@md)

Tailwind CSS

<!-- 1. Mark the parent as a container -->
<div class="@container">

  <!-- 2. Use @sm, @md, @lg breakpoints -->
  <div class="flex flex-col @md:flex-row gap-3">
    <img class="@md:w-1/3" />
    <div class="@md:w-2/3">
      <h3 class="text-sm @lg:text-lg">
        Title scales with container
      </h3>
    </div>
  </div>
</div>

34 / 35