CSS / Advanced

Use container queries for cards

Let components adapt to their own space instead of depending on the whole viewport.

Why this matters

The production reason.

Viewport breakpoints are not enough when the same card appears in a sidebar, grid, modal, and dashboard.

Container queries let the component respond to its own available space.

This keeps reusable components from needing one-off parent classes everywhere.

Copy-ready example

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

@container (min-width: 420px) {
  .product-card__body {
    display: grid;
    grid-template-columns: 120px 1fr;
  }
}

Platform notes.

How this applies outside a perfect demo, including frameworks, CMS platforms, stores, and builder workflows.

CSS: Use container-type on the component wrapper.

React: Great for reusable cards in multiple layouts.

No-code builders: Use custom CSS when built-in breakpoints cannot handle nested layouts.

Explore other stacks

Jump into a different technology.

Move from this CSS note into related HTML, CSS, Next.js, JavaScript, React, WordPress, and performance lessons.

Next.js

Use generateStaticParams for dynamic routes

Pre-render dynamic pages at build time instead of on every request to cut TTFB.

React

Keep state close to the interaction

Local state avoids unnecessary parent renders and keeps component intent obvious.

JavaScript

Abort stale fetch requests

Cancel outdated browser requests so fast UI changes do not render old data.

WordPress

Escape output at the template edge

Sanitize on input, escape on output, and keep theme templates strict about user content.

Performance

Compress images before deploy

Oversized images are still the easiest way to lose LCP before users see anything.

HTML

Use real buttons for actions

If it changes state, use button. If it navigates, use a link.