

Thus, media queries fall short if we want to build a truly flexible component that should fit into any container and have its own set of instructions on how it should behave in different circumstances no matter the outside context. Components should, for the most part, fit into any context of varying widths (and heights) and media queries “adjust things according to the constant that is the viewport”. The problem with media queries is that they don’t play well with design systems, as components within said systems usually are defined with no specific context. And with the advent of design systems, we tend to think “components” rather than “pages.” It’s 2020 and we have ever so slightly diverged from the idea that designers and developers can control every pixel of a design at any given screen size. However, media queries are still going strong and that can cause somewhat of an issue - maybe. There are numerous articles/tutorials out there illustrating the benefits and algorithmic capabilities of CSS Grid, covering everything from the visual ASCII-inspired template-areas to auto-placement making media queries somewhat obsolete.

Since it was introduced in browsers back in 2017, CSS Grid has given web designers and developers a new superpower. Dannie Vinther Follow Everything frontend.
