Container Queries Demo - KardoCSS v1.2.0

🎯 What are Container Queries?

Container queries allow you to style elements based on the size of their parent container, not the viewport. This makes components truly reusable and responsive regardless of where they're placed.

💡 Try it:

Resize your browser window to see how the cards below adapt based on their container size, not the viewport!

1️⃣ Basic Card Layout

This card changes from vertical to horizontal layout based on container width.

👆 Resize this container

🎨

Design

Responsive Card

When the container is narrow, the icon and content stack vertically. When it's wider (≥32rem), they align horizontally.

<div class="k-container-inline-size">
  <div class="k-flex k-flex-col k-cq-md:flex-row k-gap-4">
    <div class="k-cq-md:w-1/3">Icon</div>
    <div class="k-cq-md:w-2/3">Content</div>
  </div>
</div>
                

2️⃣ Adaptive Grid

Grid columns adjust based on container size.

👆 Resize to see grid adapt

📱

Mobile

1 column

💻

Tablet

2 columns

🖥️

Desktop

4 columns

⚡

Responsive

Adaptive

<div class="k-container-inline-size">
  <div class="k-grid k-grid-cols-1 k-cq-sm:grid-cols-2 k-cq-lg:grid-cols-4 k-gap-4">
    <!-- Grid items -->
  </div>
</div>
                

3️⃣ Text Size Adaptation

Text size changes based on container width for better readability.

👆 Watch text size change

Adaptive Heading

This text grows larger as the container gets wider. It ensures optimal readability at any container size.

<h3 class="k-text-base k-cq-sm:text-lg k-cq-md:text-xl k-cq-lg:text-2xl">
  Adaptive Heading
</h3>
                

4️⃣ Sidebar Layout

Sidebar collapses to top when container is narrow.

👆 Resize to collapse sidebar

Main Content

The sidebar moves to the top on narrow containers and stays on the left for wider ones.

<div class="k-container-inline-size">
  <div class="k-flex k-flex-col k-cq-lg:flex-row k-gap-4">
    <aside class="k-cq-lg:w-1/4">Sidebar</aside>
    <main class="k-flex-1">Content</main>
  </div>
</div>
                

📏 Container Query Breakpoints

Prefix	Min Width	Pixels	Use Case
`k-cq-sm:`	24rem	384px	Mobile landscape / Small tablets
`k-cq-md:`	32rem	512px	Tablets
`k-cq-lg:`	48rem	768px	Desktop
`k-cq-xl:`	64rem	1024px	Large desktop

🛠️ Available Utilities

Display

• k-cq-{breakpoint}:block
• k-cq-{breakpoint}:flex
• k-cq-{breakpoint}:grid
• k-cq-{breakpoint}:hidden

Flex Direction

• k-cq-{breakpoint}:flex-row
• k-cq-{breakpoint}:flex-col

Grid Columns

• k-cq-{breakpoint}:grid-cols-1
• k-cq-{breakpoint}:grid-cols-2
• k-cq-{breakpoint}:grid-cols-3
• k-cq-{breakpoint}:grid-cols-4

Text

• k-cq-{breakpoint}:text-{size}
• k-cq-{breakpoint}:text-left
• k-cq-{breakpoint}:text-center
• k-cq-{breakpoint}:text-right