Does HTML Grid replace media queries?

jwp profile image John Peters ・1 min read

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?


markdown guide

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