Grid by Example

Everything you need to learn CSS Grid Layout

Responsive header, two columns and a footer

This is example shows a two column pattern, with header and footer. Using media queries to move between a single and two column version. It could be a main page layout or a component of your page. The fallback uses floats and Feature Queries.

Techniques used to create this layout

Tips and techniques for fallback layouts can be found in my Grid Fallbacks and Overrides Cheatsheet.

Example on CodePen

See the Pen Header, 2 columns, footer responsive version by rachelandrew (@rachelandrew) on CodePen.