# Day 78: container query units

DevFeed: [Day 78: container query units](<https://devfeed.tech/articles/day-78-container-query-units-52274.md>)

Original publisher: [Read original article](<https://www.matuzo.at/blog/2023/100daysof-day78>)

Author: Manuel Matuzović

Published: 2023-01-11T00:00:00Z

Content type: tutorial

Language: en

Sources: [Manuel Matuzović - Blog](<https://devfeed.tech/sources/manuel-matuzovic-blog.md>)

Topics: [container](<https://devfeed.tech/topics/container.md>), [CSS](<https://devfeed.tech/topics/css.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>)

Tags: [background](<https://devfeed.tech/tags/background.md>), [border](<https://devfeed.tech/tags/border.md>), [color](<https://devfeed.tech/tags/color.md>), [container](<https://devfeed.tech/tags/container.md>), [css](<https://devfeed.tech/tags/css.md>), [size](<https://devfeed.tech/tags/size.md>), [type](<https://devfeed.tech/tags/type.md>), [units](<https://devfeed.tech/tags/units.md>), [value](<https://devfeed.tech/tags/value.md>), [viewport](<https://devfeed.tech/tags/viewport.md>)

## AI overview

A tutorial explaining CSS container query units, including how cqw, cqh, cqi, cqb, cqmin, and cqmax relate to a query container's dimensions rather than the viewport.

## Source excerpt

Container queries come with their own units. Container query units work the same as viewport units. 80cqi equals 80svi. div { outline: 10px solid; } h2 { background-color: yellow; border: 5px solid; inline-size: 80cqi; } It's me, Mike D! The big difference is that if they're inside a size container, container query units aren't relative to the viewport anymore, but to the container. div { outline: 10px solid; container-type: inline-size; } h2 { background-color: yellow; border: 5px solid; inline-size: 80cqi; } It's me, Mike D! Container Units unit relative to 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 My blog doesn't support comments yet, but you can reply via blog@matuzo.at.