CSS Responsive Containers

Code

.parent {
   container-name: myContainerQuery;
   container-type: inline-size;
}

@container myContainerQuery (width <= 200px) {
  .child {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    border: 2px solid blue;
    background-color: red;
  }
}

Transcript

Hey everyone! Let’s talk about CSS container queries—the ultimate tool for responsive layouts!

First, we set up the parent container. The container-name gives it a reference name, and the container type of inline-size means we’re checking its width.

Next, we use the @container rule,

When the container is 200px or less, the child element is going to get a bunch of new properties such as a flex layout, border properties and a red background.

Drag the container, and it responds dynamically to its size.