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.
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">
.
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.
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:
This uses the same .media--flipped
class as the first flipped example.
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