Css Module 33

  Module 33 : CSS Container Queries – Designing Components Based on Container Size

1. Introduction to Container Queries

What are Container Queries?

Traditionally, we use media queries to make designs responsive based on the viewport size. But sometimes, components need to respond to the size of their containers, not the entire screen. This is where container queries come in.

Use Case Example: Imagine a card component inside a sidebar versus the main content area. If the sidebar is narrow, the card should stack vertically; if it's wider, it should show elements side by side.

Why Container Queries Matter:

More modular CSS

Truly reusable components

Less dependency on layout structure

Perfect for design systems

2. Setting Up Container Queries

Step-by-step Setup

Define a Container Context

First, you must mark an element as a container using the container-type property.

css code

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

inline-size makes the container respond to its width.

Use Container Queries

Now, define styles for components inside that container:

css

Copy code

@container card (min-width: 500px) { .card { flex-direction: row; } }

3. Practical Example – Responsive Card Component

HTML:

html code

<div class="card-container"> <div class="card"> <img src="image.jpg" alt="Image" /> <div class="card-content"> <h2>Title</h2> <p>Description goes here...</p> </div> </div> </div>

CSS:

css code

.card-container { container-type: inline-size; container-name: card; width: 100%; max-width: 600px; margin: auto; } .card { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; border: 1px solid #ccc; } @container card (min-width: 500px) { .card { flex-direction: row; } .card img { width: 200px; height: auto; } }

Explanation: When the container is less than 500px, the card stacks vertically. Once it's 500px or wider, the layout switches to horizontal.

4. Exercise: Build a Product Grid

Goal: Create a grid of product cards that change layout based on the container size.

Requirements:

Container wraps all product cards

Below 600px: stack vertically

600px–900px: two-column grid

Above 900px: three-column grid

HTML (Starter):

html code

<div class="product-container"> <div class="product">Product 1</div> <div class="product">Product 2</div> <div class="product">Product 3</div> </div>

CSS (Starter):

css code

.product-container { container-type: inline-size; container-name: product-grid; display: grid; gap: 1rem; } .product { padding: 1rem; background: #f4f4f4; }

Challenge: Add container queries to handle layout shifts for different widths.

5. Adaptive Dashboard Widgets

Objective: Create a dashboard with widget cards that adapt based on their container size.

     

 

Step-by-Step Tasks:

Create a dashboard layout with multiple columns.

Place widgets inside individual containers.

Each widget should change layout based on its container width:

Less than 300px: content is stacked

300px–600px: use flex-row

Above 600px: add extra details or a graph

Code Sample:

html code

<div class="dashboard"> <div class="widget-container"> <div class="widget"> <div class="icon">⚙</div> <div class="info"> <h3>CPU Usage</h3> <p>72%</p> </div> </div> </div> </div>

css code

.widget-container { container-type: inline-size; container-name: dashboard-widget; } .widget { display: flex; flex-direction: column; padding: 1rem; border: 1px solid #ccc; } @container dashboard-widget (min-width: 300px) { .widget { flex-direction: row; justify-content: space-between; } } @container dashboard-widget (min-width: 600px) { .widget::after { content: "Graph: ▓▓▓░░░"; margin-top: 0.5rem; } }

6. Summary

Container Queries enable truly modular and responsive components.

They respond to container size rather than viewport size.

Ideal for component libraries, dashboards, and dynamic layouts.

Requires setting a container context using container-type.

7. Final Challenge (Project)

Build a Responsive Card Gallery:

Gallery with multiple cards inside a resizable container

Each card should:

Stack vertically when narrow

Switch to row layout above 400px

Show additional metadata above 700px