The Grid, with excellent horizontal and vertical layout control, does a great job of making all content abide by its template rules. Use of the repeat, auto-fit, and minmax functions seem to handle all screen sizes if they have the correct values.
What specific instance would require a media query that the Grid couldn't perform?
Update Jan. 2021
Per Joel's reply below (and plenty of lab time), the grid doesn't seem to be able to accomplish mobile screen sizes too well. It gets close but is not a one-stop-shop.
Even when we specify VW and VH units for columns or rows it just doesn't seem to work without media screen queries for specific sizes.
The answer is no, it doesn't replace them, rather the columns and rows need to be tweaked for specific screen sizes.
Top comments (2)
Hi my friend, there are loads of things that media queries can perform well and grid / flex cannot.
Most important is the typo size on different resolutions, on UX some had tried to use ems or rems but aren't good to reach the expected on any size.
Then you will found some caveats while using grid / flex only. For example you may want some content to display reverse on phone by importance or whatever, so you can add a media query and set
flex-direction: row reverse;Which is flex but you'll need a media for setting it up.Another thing to take in mind are the interaction of the user with your web app, that will be so different between having a mouse and a keyboard or having only your fingers.
At this point I prefer to use flex with some media queries; I'm building a SCSS framework that uses flex for the basic layout (at this moment it needs a refactor to use all fancy Sass tools, but it's almost ready) I'll share it when finished :D
Thank you , @joelbonetr I updated the article to include your comment!