Media Queries

Some CSS rules should apply only on some screens: two columns side by side on a laptop, but one column on a phone. CSS lets you wrap such rules in a condition about the screen, and the browser applies them only while the condition is true. The wrapper is the @media rule, and the condition is called a media query.

Syntax

@media (max-width: 600px) {
  .columns {
    grid-template-columns: 1fr;
  }
}

The part in parentheses is the condition, which is called a media feature together with its value