#responsive-design

Web Platformintermediate

Container queries for component-level responsive design

.card-wrapper {
  container: card / inline-size;
}

.card {

Let a card switch to a two-column layout based on its own wrapper's width, not the viewport, so it works the same in a sidebar or a full-width column.

Web Platformintermediate

ResizeObserver for a responsive component with no resize listener

const setLayout = (el: HTMLElement, width: number) => {
  el.classList.toggle("is-wide", width >= 560);
  el.classList.toggle("is-compact", width < 320);
};

Give a component its own width-based breakpoints, driven by its actual box size instead of the window's, with no global resize listener at all.