CSS Academy · Lesson

@container Rules and Breakpoints

Write @container rules that apply styles when the container reaches specific dimensions.

@container Rule Syntax

@container is the at-rule that applies styles when a container meets certain size conditions. Its syntax mirrors media queries:

@container (min-width: 400px) {
  /* styles for content inside a 400px+ container */
}

Target a specific named container:

@container sidebar (min-width: 200px) {
  .nav-item { flex-direction: row; }
}