Day 78: container query units

posted on

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

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

See on CodePen

Further reading

Overview: 100 Days Of More Or Less Modern CSS