Media Object 1

Low-angle shot of a tall white building pointing to a blue sky

Notice that the content in this column doesn’t wrap underneath the photo. This is the secret:

  grid-row: 1 / span 20;

It’s applied to the img, telling it to occupy rows 1 through the span value. I chose “20” as an artificially high number; you could modify it to suit your needs. As long as it’s at least as high as the number of grid items other than the image, it’ll work. This example has 5 grid items other than the image: the heading, a paragraph, a pre element, and two more paragraphs. Grid doesn’t render the remaining 15 rows (that is, the 20 minus the 5) because they’re empty and we didn’t give them an explicit height. So by using a high span value, the same CSS can be used for media objects with varying amounts of grid items.

By comparison, creating this in Flexbox requires wrapping this column’s content in a div or similar container.

Media Object 2: Flipped

In this case, the img comes after the other content in the HTML (although it doesn’t have to). The CSS is the same except for this addition:

  .media--flipped {
    grid-template-columns: 1fr auto;
    grid-auto-flow: column;
  }

That class goes on the element that wraps the entire media object. So, whereas Example 1 uses <div class="media">, this one uses <div class="media media--flipped">.

Low-angle shot of a tall white building pointing to a blue sky

Media Object 3: Kitchen Sink

A woman smiling and laughing

This one includes a little bit of everything, including nested media objects. It could include another image, an image in a figure, a table, a form, buttons—whatever you’d like. The CSS is the same.

A woman smiling and laughing

Nested Media Object

Recusandae voluptatum obcaecati quam qui maxime minima reprehenderit dolore enim consequatur, culpa odit hic?

Provident reiciendis, illo distinctio repellendus dolores impedit, debitis!

An unordered list:

A woman smiling and laughing

Nested Media Object: Flipped

This uses the same .media--flipped class as the first flipped example.

Aerial view of winding path through colorful forest
An image in a figure element.

Esse animi distinctio ea, ipsum error atque, dolore, quod similique, assumenda molestiae porro. Laboriosam vero commodi. Aspernatur sint quasi harum repellat debitis, perferendis error ab deserunt facilis assumenda excepturi libero, expedita doloribus reiciendis, quae necessitatibus ut ipsa eaque.

Photos courtesy of Unsplash