# Media query

Applies CSS only when a condition is true, like a minimum screen width.

## What is a **media query**?

A **media query** applies CSS only when a condition is true, most often "when the screen is at least this wide".

```css
@media (min-width: 768px) {
  .products { grid-template-columns: repeat(3, 1fr); }
}
```

Level: Journeyman · [More CSS terms at this level](https://www.ask-codey.com/glossary/subjects/css/journeyman)

Updated: September 27, 2026

Source: https://www.ask-codey.com/glossary/media-query