Responsive Variables

Redefine variables inside media queries to change layout, typography, and spacing responsively.

Example

:root { --cols: 1; --h1: 1.75rem; }
@media (min-width: 768px)  { :root { --cols: 2; --h1: 2.25rem; } }
@media (min-width: 1200px) { :root { --cols: 3; --h1: 2.75rem; } }
.grid { grid-template-columns: repeat(var(--cols), 1fr); }

CSS

Full Editor

Pro Tip

Responsive variables eliminate duplicated @media blocks on every component.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned