How to Detect Content Wrapping Using CSS Container Queries
Are you wondering if CSS container queries can do more than just adjust layouts based on screen size? They have a powerful feature called wrap detection. This lets you change styles when content wraps to a new line, which is different from how traditional media queries work. We’ll explore how to use this handy trick with a practical example.
What You’ll Learn
This guide will show you how to use CSS container queries to detect when your content wraps. You’ll learn how to apply different styles based on this wrapping, making your web designs more responsive and dynamic. We will start with a simple image example and then move to a more common use case involving multiple columns.
Prerequisites
- Basic understanding of HTML and CSS.
- Familiarity with CSS Flexbox.
- Knowledge of CSS container queries is helpful but not strictly required, as we will explain the concepts.
Step 1: Set Up Your HTML Structure
First, let’s create the basic HTML for our example. We’ll use a container element that will act as our ‘wrap detector’. Inside this container, we’ll place the content we want to monitor for wrapping. For this example, we’ll use a simple image that might become too tall when its container gets narrow.
Here’s how your HTML might look:
<div class="split">
<div class="wrap-detector">
<img src="your-image.jpg" alt="Descriptive Alt Text">
</div>
<div class="content-side">
<!-- Other content here -->
</div>
</div>Step 2: Define the Container
Now, we need to tell the browser that our ‘.wrap-detector’ element should be a container for container queries. This is done by setting its ‘container-type’ property. We’ll use ‘inline-size’ which means the container query will track the horizontal size of the element.
Add the following CSS:
.wrap-detector {
container-type: inline-size;
container-name: wrap-detector; /* Optional but good practice */
}Expert Note: The ‘container-name’ is useful when you have multiple containers on a page. It helps you specify exactly which container your query should apply to. For simplicity here, we name it after the class.
Step 3: Apply Conditional Styling with Container Queries
This is where the magic happens. We can now write a CSS rule that applies styles only when the ‘.wrap-detector’ container reaches a certain size. Instead of using pixels like in media queries, we can use viewport units (like ‘vw’ for viewport width) to define our condition. This might seem strange at first.
Let’s say we want to limit the image’s height when the ‘.wrap-detector’ container takes up more than 75% of the viewport width. Add this to your CSS:
@container wrap-detector (min-width: 75vw) {
.wrap-detector img {
height: 20vh; /* Shrink the image height */
}
}Why this works: When your layout is narrow, the ‘.wrap-detector’ might only take up about 50% of the screen width (due to padding and other elements). As the screen widens, it might expand. However, when your content wraps (like in a multi-column layout), the ‘.wrap-detector’ might shrink. This query checks if the ‘.wrap-detector’ container itself is wider than 75% of the viewport. If it is, it means the content inside is likely not wrapping in a way that causes it to become too tall, so we might want to adjust the image size. Conversely, if the container is smaller, the image might retain its original height.
Warning: Using viewport units directly in container queries can sometimes be confusing. It’s checking the container’s size relative to the viewport, not just its own content size. This example shows a neat trick but might not be the most efficient way to handle large images in production.
Step 4: Handle Multi-Column Layouts
Let’s try a more practical scenario: a three-column layout. If each column is a ‘.wrap-detector’, they might become too narrow individually. The previous query might not trigger because each column is only a fraction of the viewport width, even if they are stacked vertically.
Here’s the HTML for a three-column setup:
<div class="columns">
<div class="column wrap-detector">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="column wrap-detector">
<img src="image2.jpg" alt="Image 2">
</div>
<div class="column wrap-detector">
<img src="image3.jpg" alt="Image 3">
</div>
</div>The issue is that the ‘.wrap-detector’ inside each column is small. If we want the image size to change based on whether the *column* is wrapping or not, we need a different approach. This requires nesting containers.
Step 5: Implement Nested Container Queries
To solve the multi-column problem, we can make the parent container (e.g., ‘.columns’ or ‘.column’) also a container. This creates a layered system. The inner container (on the image) can then query the size of its parent container.
First, make the ‘.column’ element a container:
.column {
container-type: inline-size;
container-name: column-container; /* Give it a name */
}
.wrap-detector img {
/* Styles for the image itself */
max-width: 100%;
height: auto; /* Default height */
}
Now, adjust the query on the image to reference the parent column’s container size. We can use ‘cqw’ (container query width) which represents 1% of the query container’s width.
@container column-container (min-width: 75cqw) {
.wrap-detector img {
height: 20vh; /* Or another value */
}
}
/* You might also want a fallback for when it's NOT wrapping */
@container column-container (max-width: 75cqw) {
.wrap-detector img {
height: auto; /* Or a different height */
}
}
Explanation: Here, ’75cqw’ means 75% of the width of the container named ‘column-container’ (which is our ‘.column’ element). This way, the image’s height changes based on the actual width available within its column, not the entire viewport. When the columns are side-by-side, each ‘.column’ container is wide, and the image might adjust. When they stack, each ‘.column’ container becomes narrow, and the image might revert to its default size or a different style.
Advanced Trick: You can even use container query units like ‘100cqi’ (100% of the query container’s inline size) for more precise control.
@container column-container (width: 100cqi) {
/* Styles when the column container is at its full width */
}
Understanding Wrap Detection Limitations
It’s important to know that container queries for wrap detection have some limits. They work best when you have defined sizes or structures that cause wrapping. If you’re using something like pure Flexbox wrapping without explicit sizes on the items, it might not detect the wrap reliably because the items might collapse.
Container queries are not meant to replace media queries entirely. They offer a different way to control layouts based on the *container’s* size, not just the *viewport’s*. By understanding these differences and using them thoughtfully, you can unlock powerful new design patterns.
This technique allows your components to adapt intelligently, making your websites more flexible and user-friendly across various devices and screen sizes.
Source: Wrap detection with a few lines of CSS (YouTube)
