CSS Container Queries: Container Relative Lengths

Update 2021.10.07: The CSS Working Group has decided to use the cq prefix (instead of q before) for these units. This post has been updated accordingly. Could be that the included demos and/or browser implementations are lagging behind on this.

~

Coming with Container Queries are “Query Length Units”. As per spec:

Query length units specify a length relative to the dimensions of a query container. Style sheets that use query length units can more easily move components from one query container to another. The 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 cqi or cqb
  • cqmax = The larger value of cqi or cqb

💁‍♂️ In earlier discussions the cw unit (and other accompanying c* units) was proposed for this. The cq* units are the result that was settled on, mainly due to conflicts with the existing ch unit.

~

As shared by Miriam Suzanne (who originally made the proposal and is an editor of the spec), these units are part of the experimental Container Queries support in Chromium:

~

Using those new units, Ahmad Shadeed created some practical examples. See this comparison here, where a whole blob of CSS gets replaced with clamp() that uses the cqw unit:

CSS Container Query Units →

~

Chris Coyier also created a nice interactive demo:

See the Pen
resizeasaurus with container units
by Chris Coyier (@chriscoyier)
on CodePen.

If your browser doesn’t support Container Queries — which it most likely doesn’t — here’s a recording:

Take a good look at how the text size gets adjusted, as the containers get resized.

Neat!

About the author

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

4 Comments

  1. Quotes from the spec seems contain a typo.
    > qw = 1% of a query container’s block size
    “qw” should be “qb”, I guess.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.