Grid by Example

Everything you need to learn CSS Grid Layout

Media Objects

A whole set of example media objects with a float fallback. These objects can be flipped, they can be nested, then can have a fixed column for the image or a flexible one.

This example creates the layout using grid-template-areas.

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 Media Objects by rachelandrew (@rachelandrew) on CodePen.