Course Outline (Part 20)

Welcome to Part 20 of the CSS Mastery & Responsive Layouts Course. In this part, we will explore CSS Container Queries.

For years, responsive design relied entirely on Media Queries, which adapt styles based on the width of the entire browser viewport. However, in modern component-driven architectures (like React, Astro, or Vue), a card component might render inside a wide main content column or a narrow sidebar. Container Queries solve this by allowing elements to adapt their styles based on the dimensions of their immediate parent container rather than the screen viewport.

Chapter 120: Viewport Queries vs. Container Queries

Understanding the difference is key to component reuse:

  • Media Queries: Target screen size. If a card is in a 300px sidebar on a 1920px screen, a media query sees a large screen and might try to render a wide desktop horizontal card, breaking the layout.
  • Container Queries: Target parent size. The card checks its parent’s width (300px) and renders as a stacked vertical card, fitting perfectly regardless of overall screen resolutions.

Chapter 121: Defining Container Contexts (container-type)

To query a parent container, you must first register it as a container context using the container-type property:

.card-wrapper {
  /* Tracks the inline-size (width) of the container for queries */
  container-type: inline-size;
  /* Optional: Names the container to distinguish it in complex layouts */
  container-name: product-grid;
}

/* Shorthand: container: [name] / [type] */
.card-wrapper-shorthand {
  container: product-grid / inline-size;
}

121.1 Container Types

  • inline-size (Recommended): Tracks changes along the inline axis (width in horizontal layouts).
  • size: Tracks changes along both inline and block axes (width and height). Note: size requires the container to have a fixed height to prevent infinite loop reflows.

Chapter 122: Container Query Syntax (@container)

Once the parent container is declared, style its children using the @container rule:

@container (min-width: 400px) {
  /* Styles apply to .product-card only when its parent wrapper is wider than 400px */
  .product-card {
    display: flex;
    flex-direction: row;
    gap: 20px;
  }
}

/* Querying named containers */
@container product-grid (min-width: 400px) {
  .product-card-title {
    font-size: 1.5rem;
  }
}

Chapter 123: Container Query Units

CSS Container Queries introduce new sizing units that resolve relative to the parent container’s dimensions instead of the viewport:

  • cqw: 1% of the container’s width.
  • cqh: 1% of the container’s height.
  • cqi: 1% of the container’s inline size (width).
  • cqb: 1% of the container’s block size (height).
  • cqmin: The smaller value of cqi or cqb.
  • cqmax: The larger value of cqi or cqb.
.card-header-title {
  /* Font size scales fluidly based on the parent wrapper width */
  font-size: clamp(1rem, 5cqi + 0.5rem, 2rem);
}

Chapter 124: Container Queries Practice & Self-Check

124.1 Practice Exercises

  1. Exercise 1: Sidebar Adaptive Card: Create a card component that switches layouts based on its parent column width. 
    .column-parent {
  container-type: inline-size;
}
.adaptive-card {
  display: flex;
  flex-direction: column;
}
@container (min-width: 500px) {
  .adaptive-card {
    flex-direction: row;
    align-items: center;
  }
}

124.2 Self-Check Questions

  1. What is the main limitation of viewport media queries resolved by container queries?
    • Answer: Viewport queries cannot style components based on the size of their parent wrappers, making it hard to reuse elements across sidebar and body layouts.
  2. What property registers an element as a queryable parent?
    • Answer: container-type.
  3. What container type only tracks parent width changes?
    • Answer: inline-size.
  4. Which query rule prefix is used to target container queries?
    • Answer: @container.
  5. What does the cqi unit represent?
    • Answer: 1% of the container’s inline size (width).
  6. Can you assign a name to containers to target them specifically?
    • Answer: Yes, using the container-name property.
  7. Why is container-type: size rarely used compared to inline-size?
    • Answer: It tracks both width and height, requiring container heights to be fixed, which can block vertical element growth and cause overflows.
  8. What is the shorthand syntax parameter order for container registrations?
    • Answer: container: [name] / [type].
  9. What happens if an element targets a container query but has no registered container ancestors?
    • Answer: The container query fails to resolve, and the browser falls back to matching viewport dimensions as a container reference.
  10. Are container query units (like cqi) valid inside typography font-size styles?
    • Answer: Yes, they enable component-driven fluid typography.

Discussion

Loading comments...