Meet our friends cqw and cqh

You know those companies that have abbreviations for everything that you can hardly spell or pronounce? Well, guess what? We have the same in CSS! Allow me to introduce you to the siblings ‘cqw’ and ‘cqh’. ‘cqw’ stands for a percentage of the width of the container query and ‘cqh’ naturally represents a percentage of the container’s height. Take a look at this CSS.

.container {
  container-type: inline-size;
}

.child {
  padding: 3cqw;
  font-size: 3cqw;
  border-radius: 0.5rem;
}

This means that we have a container with a child in it, and both the padding and the font-size will be 3% of the container’s width. This opens up for a very versatile responsive layout where we can place the child in a wide main section where it stands out distinctly, or in a small sidebar where the font and padding will adjust themselves to align well with the surroundings.

We have the possibilities to make stuff really responsive. We just have to learn the tools!