Responsive Layouts, Fewer Media Queries

Over at CSS-Tricks you can read a min-bending article by Temani Afif

Since the introduction of media queries (literally decades ago), CSS has evolved to the points that there are a lot of tricks that can help us drastically reduce the usage of media queries we use. In some cases, I will show you how to replace multiple media queries with only one CSS declaration. These approaches can result in less code, be easier to maintain, and be more tied to the content at hand.

Common theme in all code shown is the use if max() and clamp(), resulting in code that’s hard to grasp:

grid-template-columns: repeat(auto-fit, minmax(clamp(100% / (var(--n) + 1) + 0.1%, (var(--w) - 100vw) * 1000, 100% / (var(--m) + 1) + 0.1%), 1fr));


Be sure to stick around for the More Tricks section of the post, as it also holds some nice things you can do:

While I do like the results, I’ll stick to using the more readable CSS Container Queries syntax once that becomes stable 😅

Responsive Layouts, Fewer Media Queries →

Source: Bram Van Damme

November 29, 2021
Category : News
Tags: css | Elsewhere | Link | Responsive Web Design

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.