CSS Container Queries

Last Updated : 03 Apr, 2025

CSS Container Queries are a feature in web design that allow elements to adjust their styles based on the size of their parent container, rather than the overall viewport. This means that components can be more flexible and responsive to their immediate surroundings, leading to designs that adapt seamlessly to various layouts and container sizes.

Prerequisite

Understanding CSS Container Queries

Container Queries allow elements to apply styles depending on the size of their parent container. To utilize this feature, define a containment context using the container-type property, specifying values like size, inline-size, or normal.

Example: Defining a Container

.container {
  container-type: size;
}

Here, .container becomes a reference point for any nested container queries, enabling responsive adjustments based on its dimensions.

Implementing Container Queries

After establishing a container, you can create container queries using the @container rule, similar to media queries but targeting the container's size.

Example: Applying Styles Within a Container Query

@container (min-width: 500px) {
  .child {
    background-color: lightblue;
  }
}

In this example, if the container's width is 500px or more, the .child element's background color changes to light blue.

Example of CSS Container

CSS Container Queries are a feature that allows developers to apply styles to elements based on the size of their parent container, rather than the viewport. This approach enhances responsive design by enabling components to adapt to varying container sizes.

HTML Structure:

HTML

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Container Queries Example</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="container">
        <div class="card">
            <h2>Card Title</h2>
            <p>This is some card content that should adjust based on the container size.</p>
        </div>
    </div>
</body>
</html>

CSS:

CSS

/* index.css */

/* Basic styles for the container */
.container {
    container-type: inline-size;
    /* Enable container query based on container's width */
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f5f5f5;
}

/* Default card styling */
.card {
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Default styling for card elements */
.card h2 {
    font-size: 1.25rem;
    margin-bottom: 10px;
}

.card p {
    font-size: 1rem;
}

/* Container query: When the container is at least 400px wide */
@container (min-width: 400px) {
    .card {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .card h2 {
        font-size: 1.5rem;
    }
}
/* Container query: When the container is at least 600px wide */
@container (min-width: 600px) {
    .card {
        flex-direction: row;
    }

    .card p {
        font-size: 1.2rem;
    }
}

Explanation:

Container Definition: The .container class sets container-type to inline-size, enabling container queries based on the container's width.
Default Card Styling: The .card class defines the initial appearance of the card component.
Container Queries:
- When the container's width reaches 400px, the card layout switches to a row (horizontal) layout, and the title font size increases.
- At 600px width, the paragraph font size adjusts for better readability.

Responsive Behavior:

Below 400px: The card maintains a stacked (column) layout with default font sizes.
Between 400px and 600px: The card adopts a horizontal layout, and the title font size increases.
Above 600px: The layout remains horizontal, with the paragraph text size adjusted for improved readability.

Primer CSS Flexbox Flex Container

gmoksi039

Improve

Article Tags :