Media & Container Query Generator
Build breakpoint sets for responsive CSS. Toggle between viewport media queries and component-level container queries.
Desktop-first max-width queries are harder to extend — mobile-first min-width is usually easier to maintain.
Container queries respond to a parent element's size, not the viewport. Baseline browser support since 2023.
Output
Individual queries
Individual @container blocks
About this tool
Media queries scope styles to the viewport. Container queries let components adapt to their parent — useful for cards, sidebars, and reusable widgets.
Mobile-first min-width blocks are easier to extend — each breakpoint adds rules without undoing wider layouts. Desktop-first max-width chains get brittle fast. Container mode outputs @container setup plus width queries in pixels. Addon queries for prefers-color-scheme, print, and coarse pointers belong in separate blocks — do not nest them inside width breakpoints unless you mean to combine conditions.
Breakpoint and mode choices are shareable via URL query params.
Read more
Free books, courses, and software
Get my programming books, course editions, and complete software.
Get the download library →