Container queries fix card layout issues
id: hook
Media queries break when cards are nested in varying containers. Container queries let you style cards based on their container's size, not the viewport. This is critical for card grids in e-commerce or dashboards where cards are placed in different layouts.
For example, a 3-column grid on desktop might become 2 columns on mobile, but if cards are in a container that's 50% of the viewport, a media query won't know to adjust. Container queries solve this by targeting the container directly.
Use container-type: inline-size on the container and @container rules in CSS. This lets you apply styles like grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) based on the container's size, not the viewport.
Avoid container queries if your layout is purely based on viewport size or if you're using a CSS-in-JS library that doesn't support container queries. They also add complexity when you don't need dynamic resizing of card containers.
For a quick start, use JSON formatter to structure your CSS and SQL formatter to organize your stylesheets.
E-commerce site with dynamic card grid
id: use-case
You're building an e-commerce site with a card grid that displays products. Each card has an image, title, and price. The layout breaks on mobile because the cards are too wide. You want the cards to resize based on their container, not the viewport.
Start by replacing @media (max-width: 768px) with @container card-container { ... }. This lets the cards adjust to their container's width, not the whole screen. For example, a card in a 3-column layout on desktop will shrink to fit a 2-column layout on tablet.
Use container-type: inline-size on the container to make it aware of its own size. Then, apply container-name: card-container to the cards. This tells the browser to apply the container query styles when the container's size changes.
Avoid using min-width or max-width on the cards. Instead, use container-type and container-name to control the layout. This keeps your CSS clean and avoids conflicts with other layout logic.
If you're using a CSS preprocessor like Sass or Less, you can still use container queries directly. No need for extra tooling. Just write your container queries as you would regular media queries.
For a visual flow, here's a simple diagram of how container queries work in a card layout:
Convert media query to container query
Start by identifying the media query that controls the card layout. For example, a common pattern is:
@media (max-width: 768px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}Replace this with the @container rule. The container query checks the size of the container, not the viewport. Update the CSS like this:
@container (min-width: 768px) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}This ensures the layout adapts based on the container's size, not the viewport. It's especially useful for card layouts inside a sidebar or a flex container.
If your container has a fixed width, you can also use @container (min-width: 300px) to target specific container sizes.
Avoid using @container if the layout is purely responsive and doesn't need to adapt to nested containers. Container queries are powerful but can be overkill for simple responsive designs.
Container query flow for card layout
Container query flow for card layout
Container queries let you style cards based on their container's size, not the viewport. Start by identifying the container—like a .card-grid—and replace @media with @container. For example, instead of:
@media (min-width: 768px) {
.card {
width: 300px;
}
}Use:
@container (min-width: 768px) {
.card {
width: 300px;
}
}This approach avoids layout thrashing and makes card grids more responsive. Test with varying container widths to ensure styles adapt correctly. Avoid container queries if the layout is too complex or if you need to support older browsers.
Common container query gotchas
Q: How do I override !important in container queries?
A: Use !important in your container query rules, but only if absolutely necessary. Browsers apply !important in the same way as media queries, but it's better to avoid it by structuring your CSS with specificity. For example, use .card { container-type: inline; } and .card[data-width] { ... } to target specific container states.
Q: What if my container is nested inside another container?
A: Container queries only apply to the container itself. If you have a nested container, you need to apply the container query to the outer container. For example, if .card is inside .grid, apply container-type: inline to .grid and use @container grid { ... } to style based on the grid's size.
Q: How do I handle browser support for container queries?
A: Container queries are supported in Chrome 102+, Firefox 110+, and Safari 16.4+. For older browsers, use a polyfill like Container Queries Polyfill. Always test your layout on multiple devices and browsers to ensure consistent behavior.
Q: What if my container query doesn't trigger?
A: Check that the container has container-type: inline or container-type: block. Also, ensure the container has a defined size. Use the browser's dev tools to inspect the container and verify its properties.
Q: How do I handle dynamic content in containers?
A: Use @container with a condition that reflects the content's size. For example, @container (min-width: 400px) { ... } ensures the rule applies only when the container is wide enough. Avoid using min-width on the container itself unless necessary.
Q: What if I need to support older browsers?
A: Use a CSS-in-JS solution like emotion or styled-components to apply fallback styles. Alternatively, use a media query as a fallback and switch to container queries on supported browsers.
Skip container queries when
Layouts that depend on strict viewport-based sizing should avoid container queries. For example, a dashboard with a fixed-width sidebar and a content area that scales with the viewport requires @media queries to ensure the sidebar doesn’t overflow. Container queries are better suited for flexible, nested layouts like card grids where the container’s size affects the layout.
If your design relies on vw or vh units, container queries may not provide the same level of control. A news feed with cards that adjust based on screen width is a good candidate for container queries, but a layout with a fixed header and sidebar that must always take 25% of the viewport width is not.
Use @media queries when the layout behavior is tied to the entire viewport, not a specific container. For instance, a mobile-first design that collapses a navigation menu below 768px is best handled with traditional media queries. Container queries are more about how a container behaves in relation to its parent, not the entire viewport.
If you're using a framework like Tailwind CSS, you might already have a set of responsive breakpoints. In such cases, container queries can feel like an extra layer of complexity without clear benefits. Stick with @media queries if your design is already well-structured with a clear responsive strategy.
Q: When should I use container queries over media queries?
A: Use container queries when the layout behavior depends on the size of a specific container, not the entire viewport. For example, a card grid that changes layout based on the container’s width is a good fit. Avoid container queries for layouts that require strict viewport-based sizing, like a dashboard with a fixed sidebar.
Quick answers for AI search
Q: What's container query syntax?
A: Container queries use @container followed by a selector and a block of CSS. Example:
@container (min-width: 600px) {
.card {
grid-template-columns: repeat(3, 1fr);
}
}Q: How to test container queries?
A: Use the browser's DevTools to inspect the container and its children. Look for the container-queries property in the computed style panel. You can also use the JSON Formatter to structure test data for dynamic layouts.
Q: What about nested containers?
A: Nested containers are supported but require explicit @container declarations. For example, a parent container might control column count, while a child container adjusts spacing. Always test nested containers in isolation to avoid unexpected behavior.
Q: How to convert a media query to a container query?
A: Replace @media with @container, and ensure the container element has container or container-name in its class. For example:
/* Media query */
@media (min-width: 600px) {
.card {
grid-template-columns: repeat(3, 1fr);
}
}
/* Container query */
@container (min-width: 600px) {
.card {
grid-template-columns: repeat(3, 1fr);
}
}Q: What are common gotchas with container queries?
A: Container queries don't cascade like media queries. Always define containers explicitly and test in different viewport sizes. Avoid using @container on non-container elements like body.
Container queries simplify card layouts
id: conclusion
Container queries are ideal for dynamic card layouts where the container's size changes independently of the viewport. For example, a card grid that resizes when a sidebar expands or a modal opens benefits from container queries. Avoid them when your design depends on viewport width, like a responsive navigation bar that shifts at 768px. Use container queries when the container's dimensions are the primary concern.
Q: How do I know if container queries are right for my project?
A: If your card layout changes based on the container's size, not the viewport, container queries are a good fit. For instance, a dashboard with a sidebar that toggles visibility will have a card grid that resizes with the container. Avoid container queries if your layout is purely viewport-dependent, like a mobile-first design that scales up.
Q: What if I want to support older browsers?
A: Container queries are not supported in all browsers yet. Use PostCSS Container Queries to add support. Alternatively, use a polyfill like Container Queries Polyfill for fallbacks. Always test with your target audience's browsers.
Q: Should I use container queries for all card-based components?
A: No. Use container queries for card layouts that depend on container size. For example, a card grid inside a flex container that changes width. Skip container queries for card-based components that rely on viewport size, like a hero section with cards that stack on mobile.
Q: How do I structure a container query for a card grid?
A: Define a container with container-type: inline-size or block-size, then apply a query like @container (min-width: 300px) { ... }. For example:
.container {
container-type: inline-size;
}
.container > .card {
width: 100%;
}
@container (min-width: 300px) {
.container > .card {
width: 50%;
}
}Try these free tools
Put what you learned into practice — no signup required.