Grid And Media Queries

Always operate from outside to inside.

When building your media queries, try to add them to the parent and change grid-template-areas. It’s more efficient and practical to re-arrange the grid (or turn it off completely) than it is to re-arrange the child elements. Autoprefixer will manage all our media query prefixes for us (unless we’re doing some truly unique changes).

If your media queries are contained inside your grid rule block, some things don’t need to be passed into the query. Autoprefixer will pick up on grid-gap if it’s part of the same rule-set.

See the Pen Grid and Media Queries by Dave Cross (@davecross) on CodePen.

With media queires and Grid, you'll quickly find that art-directing your layouts for different screen sizes is easy. In the following demo, all the children change order based on screen width.

See the Pen Grid and Media Queries Extra by Dave Cross (@davecross) on CodePen.

Note

You'll want to open these Codepen demos in a new tab to test the responsiveness. Do this by clicking "Edit on Codepen".