Grid by Example

Everything you need to learn CSS Grid Layout

Responsive header, two columns and a footer with negative space

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.

By stretching the main content area over multiple rows we can have space available in the sidebar.

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 using negative space by rachelandrew (@rachelandrew) on CodePen.