Implementing responsive and fluid layouts with CSS Grid

CSS Grid offers us two ways of defining responsive and fluid layouts: we can use media queries to create responsive layouts or sizing keywords to create fluid layouts. We can also combine media queries and the sizing keywords to achieve layouts better suited to fit our use case, as the possibilities are infinite.

We’ve covered the definitions of sizing keywords and their values in Chapter 1, Understanding the Basic Rules and Structures for CSS Grid, already, so we’ll focus on their advanced usage in the context of fluidity and responsiveness.

Media queries and altering grid area templates

The first reflex to responsive layout implementation we might have would be to use media queries. Since becoming a World Wide Web Consortium (W3C) standard in 2012, they’ve been a staple of modern web development.

They have practically made fully adaptive layouts obsolete, as they allow us to react to the size...