What we did

May 2025 : This month we looked at Container Queries.

Long ago we had to force the content of our HTML pages by using left right commands and floats which we had to clear. Then the iPhone came. CSS now needed to find a way to display on small devices. That brought in the idea of responsive design. CSS found a solution in Media Queries.

That allowed us to define how parts of the site would be shown at set sizes. The basic idea is to resize parts of the html content to meet the needs of the screen on which it is seen. You can see how that works in our report of the October 2020.

Then CSS introduced Flexbox and Grid which made responsive design much easier as both methods were automatically responsive. Now we have container queries.

This month we had a look at a number of videos on how container queries would change the “way we make layouts”.

The first one “Container Queries are going to change how we make layouts” by Kevin Powell.

To quote he said, “While media queries that look at the viewport size can be useful, today’s web is very component-based, and having to rely on the size of the viewport is pretty limiting. Luckily, container queries are now a thing!”. The main difference between Media and Container queries appears to be that while media will question the size of the screen a container will adjust its size depending on the relative size of its parent element.

We found a number of codepen’s based on the videos and from them built a photo site as a test.

Here are some of the other videos and codepen’s we looked at Playing with container queries.

We also looked at Optimistic Web and their ideas "CSS Container Queries Are Changing Responsive Web Layouts Forever!"

This example used a standard Header, Footer, Main, and Aside to show container queries, with a CodePen to demonstrate how it works.

Our final video “Master CSS container queries and boost your web design skills!”

uses a card layout with test and image as demo’d in this CodePen.

This is the one we used to test the idea.

The take away; you use @container like @media with the elements in the container defined as needed. The most important change is a new measurement system. See the MDN documents.

The new container query length units are:

cqw: 1% of a query container's width
cqh: 1% of a query container's height
cqi: 1% of a query container's inline size
cqb: 1% of a query container's block size
cqmin: The smaller value of either cqi or cqb
cqmax: The larger value of either cqi or cqb

Steve South

Web Design leader