cssgridgen

CSS Media Query Generator

Breakpoint scaffolds for Tailwind, Bootstrap or your own.

5 breakpoints
/* Mobile-first: styles cascade upward. */

@media (min-width: 640px) {
  /* sm and up */
}

@media (min-width: 768px) {
  /* md and up */
}

@media (min-width: 1024px) {
  /* lg and up */
}

@media (min-width: 1280px) {
  /* xl and up */
}

@media (min-width: 1536px) {
  /* 2xl and up */
}
Free tool

Breakpoints worth keeping

A breakpoint scaffold is thirty seconds of typing you should never do twice — and two details that are easy to get wrong: the fractional-pixel gap between adjacent queries, and whether your units respect the reader's font-size setting. Both are handled here.

How to use it

  1. Pick a breakpoint set

    Start from Tailwind, Bootstrap or MUI defaults so your CSS lines up with the framework you are already using, or build your own.

  2. Choose a strategy

    Mobile-first min-width queries, desktop-first max-width, or exclusive ranges where exactly one query matches at any width.

  3. Choose px or em

    em queries respond to the reader's browser font-size setting. px queries do not.

  4. Copy the scaffold

    You get the query blocks with the breakpoint names as comments, ready to fill in.

The 0.02px detail

Pairing max-width: 767px with min-width: 768px leaves a hole: viewports report fractional widths on high-density screens, and a window at 767.5px matches neither rule. Subtracting a hundredth of a pixel from the upper bound closes it. The desktop-first and range modes above do this automatically.

Prefer fewer breakpoints

Every breakpoint is a layout you have committed to designing and testing. Modern CSS removes the need for most of them: repeat(auto-fill, minmax(260px, 1fr)) reflows without any, and clamp() scales type and spacing continuously. Reach for a breakpoint when the layout genuinely needs to become a different shape — not when something just needs to be a bit bigger.

Container queries

Media queries ask how wide the window is. Container queries ask how much room the component actually has, which is the better question for anything reusable. A card that has to work in a 1000px main column and a 280px sidebar cannot be styled correctly from the viewport width alone.

Frequently asked questions

Should I use min-width or max-width media queries?
min-width, in almost every case. Mobile-first means your base styles are the simplest version and each query adds to them, which produces less CSS and fewer overrides. max-width means writing the most complex layout first and unwinding it.
Why do breakpoints use 767.98px instead of 767px?
Because viewport widths can be fractional on high-density screens. With max-width: 767px and min-width: 768px, a window at 767.5px matches neither rule and your styles vanish. Subtracting 0.02 closes the gap — it is why Bootstrap does the same.
What is the difference between px and em in media queries?
An em query respects the reader's browser font-size setting; a px query ignores it. The em is measured against the browser default rather than your CSS, so for someone who has raised their default text size the query fires at a proportionally larger viewport — keeping the layout matched to the text.
When should I use container queries instead of media queries?
When a component's layout depends on the space it sits in rather than the size of the window — a card that appears in both a wide main column and a narrow sidebar. Media queries remain right for page-level structure.
How many breakpoints do I need?
Two is often enough and three is plenty. Every breakpoint is a layout you have to design, test and maintain, and minmax(), auto-fill and clamp() remove the need for most of them.

Related tools