Responsive CreatedMar 13, 2026UpdatedApr 24, 2026Takeshi TakatsudoContainer queries, fluid design, media queries, and responsive patterns. Container QueriesStyle components based on their container's size instead of the viewport.Fluid Design with clamp()Scale sizes smoothly between a minimum and maximum using clamp() instead of breakpoints.Responsive ImagesControl image sizing and art direction with object-fit, aspect-ratio, srcset, and picture.Media Query Best PracticesUse media queries for page-level layout and user preferences with a mobile-first approach.Responsive Grid PatternsBuild grids that reflow automatically with auto-fill, auto-fit, and minmax(). Next Container Queries