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

#### 📋 Menu

- Dashboard
- Settings
- Profile

#### 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