The basic guide for CSS container queries

As web design evolves, developers have found that responsive design using media queries isn’t always the best solution. Media queries can only respond to the size of the viewport, not the size of the content within the viewport. Container queries are a new approach to responsive design that addresses this limitation. In this article, we’ll explore what container queries are and how they work.

What are container queries?

Container queries are a new feature being developed for CSS that allows developers to apply styles based on the size of the container element rather than the size of the viewport. This means that we can create more flexible and targeted responsive designs that adjust to the size of the content rather than the size of the screen.

How do container queries work?

Container queries work by allowing developers to define a set of styles for an element based on its own dimensions. The basic syntax for a container query is similar to that of a media query:

@container (min-width: 500px) {
  /* Styles go here */
}

In this example, the styles inside the container query will only be applied if the container element has a minimum width of 500 pixels.

How to use container queries?

To use container queries, first set a wrapper element. Do this by setting a container-type on the parent container, or use the container shorthand to give it both a type and name simultaneously:

// CSS
.section-container {
  container: card / inline-size;
}

Setting the container-type to inline-size queries the inline-direction size of the wrapper. In latin languages like English, this would be the width of the card, as the text flows inline from left to right.

Now, you can use that container to apply styles to any of its children using @container.

Examples of container queries

Let’s take a look at some examples of how container queries can be used in practice.

Example 1: Fluid typography

One of the challenges of responsive design is making sure that typography scales correctly across different screen sizes. With container queries, we can define a set of font sizes based on the size of the containing element.

<div class="section-container">
  <h1>Section title</h1>
  <div>Section body</div>
</div>

.section-container {
  container: card / inline-size;
}

@container (min-width: 500px) {
  h1 {
    font-size: calc(1.5em + 2vw);
  }
}

@container (min-width: 1000px) {
  h1 {
    font-size: calc(2em + 2vw);
  }
}

In this example, we’re using the calc() function to define a font size that scales with the container width. However, instead of using a media query to apply these styles based on the viewport size, we’re using a container query to apply the styles based on the size of the containing element.

Example 2: Responsive tables

Another common use case for container queries is responsive tables. Tables can be difficult to work with on small screens, but with container queries, we can adjust the layout of the table based on the size of the containing element.

<div class="table-container">
  <table>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial </td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
  </table>
</div>

.table-container {
  container: card / inline-size;
}
@container (max-width: 500px) {
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  th,
  td {
    display: block;
    width: 100%;
  }
}

In this example, we’re using a container query to adjust the layout of the table on smaller screens. The display: block property on the table and table cells allows them to be stacked vertically, while the width: 100% ensures that they take up the full width of the containing element. The overflow-x: auto and -webkit-overflow-scrolling: touch properties ensure that the table can be scrolled horizontally on touch devices.

Browser support for container queries

Google Chrome: 105

Firefox: 110

Edge: 105

Safari: 16

Source

Conclusion

Container queries are an exciting new feature that has the potential to make the responsive design more flexible and targeted. With container queries, we can create styles that adjust to the size of the content rather than the size of the viewport, making our designs more adaptable and future-proof.

---

Photo from Unsplash