Building blocks

Container queries

Let's start with a basic example. We have a blue dot that we want to become red when our main content is larger than 10em.

							<div class="main-content">
  <p>I am the main content. I contain a dot.</p>
	
  <div class="dot"></div>
</div>

<style>
.main-content {
  width: 90%;
	max-width: 10em;
	margin: 0 auto;
	background-color: #222;
	color: white;
	padding: 1em;
}

.dot {
  width: 5em;
	height: 5em;
	border-radius: 100%;
	background-color: blue;
}
</style>
						

Create a container

We want our main content to be the container this all depends on.

We'll also name it (this is optional).

.main-content {
  container-type: inline-size;
	container-name: main-content;
}

Then we want our .dot to become red when the main content is larger than 5em.

@container (inline-size > 5em) {
  .dot {
	  background-color: red;
	}
}

Styling based on container size

							<div class="main-content">
	<p>I am the main content. I contain 
	a dot. If I'm too small, my dot 
	will become blue.</p>
	
	<div class="dot"></div>
</div>

<style>
.main-content {
  container-type: inline-size;
	container-name: main-content;
	width: 90%;
	max-width: 20em;
	margin: 0 auto;
	background-color: #222;
	color: white;
	padding: 1em;
}

.dot {
	width: 5em;
	height: 5em;
	border-radius: 100%;
	background-color: blue;
}

@container main-content (inline-size > 15em) {
	.dot {
		background-color: red;
	}
}

</style>
						

Dot size relative to container

We can use cqi and cqb to size our dot, too.

In this example, we'll set both width and height to be 50 cqi, so we're basing the dot size on a percentage of the inline size of the container.

							<div class="main-content">
	<p>I am the main content. I contain 
	a dot. If I'm too small, my dot 
	will become blue.</p>
	
	<div class="dot"></div>
</div>

<style>
.main-content {
	container-type: inline-size;
	container-name: main-content;
	width: 90%;
	max-width: 20em;
	margin: 0 auto;
	background-color: #222;
	color: white;
	padding: 1em;
}

.dot {
	width: 5em;
	height: 5em;
	width: 50cqi;
	height: 50cqi;
	
	border-radius: 100%;
	background-color: blue;
}

@container main-content (inline-size > 15em) {
	.dot {
		background-color: red;
	}
}

</style>
						

Browser support