Responsive Layouts, Fewer Media Queries

Written by / Original link on Nov. 29, 2021


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 →

bram bram link tutorialzine bram

« Symfony 5.4.0 released - SVGcode: a PWA to convert raster images to SVG vector graphics »