CSS Container Queries: A Complete Guide

Introduction to CSS Container Queries

CSS container queries are a new feature in CSS that allows you to style elements based on the size of their container, rather than the size of the viewport. This allows for more flexible and responsive layouts, and can be particularly useful for creating complex layouts that need to adapt to different screen sizes and devices.

What are CSS Container Queries?

CSS container queries are defined using the @container rule, which allows you to define styles based on the size of a container element. The container element is defined using the container property, which can be set to inline-size, block-size, or style.

How to Use CSS Container Queries

To use CSS container queries, you need to define a container element with a container property, and then use the @container rule to define styles based on the container's size. For example:

.container {
  container: inline-size;
}

@container (min-width: 300px) {
  .container {
    background-color: blue;
  }
}

This code defines a container element with an inline-size container, and then uses the @container rule to set the background color of the container to blue when its width is greater than or equal to 300px.

Comparison of CSS Container Queries and Media Queries

CSS container queries and media queries are both used to create responsive layouts, but they have some key differences. The following table compares the two:

| Feature | CSS Container Queries | Media Queries | | --- | --- | --- | | Query Type | Container size | Viewport size | | Syntax | @container | @media | | Browser Support | Limited | Wide | | Flexibility | High | Low |

As you can see, CSS container queries offer more flexibility and control over the layout, but have limited browser support. Media queries, on the other hand, have wide browser support but are less flexible.

Practical Examples of CSS Container Queries

Here are some practical examples of using CSS container queries:

Example 1: Responsive Navigation Menu

.nav-menu {
  container: inline-size;
}

@container (min-width: 600px) {
  .nav-menu {
    display: flex;
  }
}

@container (max-width: 600px) {
  .nav-menu {
    display: block;
  }
}

This code defines a navigation menu with an inline-size container, and then uses CSS container queries to display the menu as a flexbox when its width is greater than or equal to 600px, and as a block when its width is less than or equal to 600px.

Example 2: Adaptive Image Gallery

.image-gallery {
  container: block-size;
}

@container (min-height: 400px) {
  .image-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

@container (max-height: 400px) {
  .image-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

This code defines an image gallery with a block-size container, and then uses CSS container queries to display the gallery as a 3-column grid when its height is greater than or equal to 400px, and as a 2-column grid when its height is less than or equal to 400px.

Next Steps

Now that you've learned about CSS container queries, you can start using them in your web development projects. To get started, try using the clamp-calculator to calculate the ideal font sizes for your responsive design. You can also use the json-formatter to format your JSON data and make it easier to work with. With CSS container queries, you can create more flexible and responsive layouts that adapt to different screen sizes and devices.