This tweet kicked off some interesting thoughts.

https://twitter.com/foamcow/status/1108290606458175489

Wes Bos made a video exploring why it's such a tricky layout situation, and ultimately wrote some JavaScript to deal with it:

There are lots of "almost" solutions. You might think CSS grid is easily capable of this, but it's not exactly cut and dry. You can't really use any rows, otherwise, the desktop layout doesn't come out right with the variable paragraph lengths. And if it's just a single row with left and right column, that means the images need to be alone in a container, which makes the mobile layout not really doable.

And if you start with img + p + img + p + img + p like the mobile layout, there is no great way of yanking all the images over to the left also in a way that supports images and paragraphs of any size, length, number, and order.

That's not to say it can't be done.

My favorite two solutions that came out of that thread both use CSS grid at the single-column level, yanking things into place with order.

In Benjamin Sterling's demo, all the text content is float: right; clear: right; at the wide breakpoint, mimicking two columns. Then at the smaller breakpoint a single CSS grid column is in place and the images are yanked up to break up the paragraphs with order.

See the Pen
Wes Bos Impossible Challenge
by Benjamin Sterling (@ben_sterling)
on CodePen.

In Dannie Vinther's demo, the two columns are built with CSS grid at the wide breakpoint, with images in one column and paragraphs in the other. Then they come together at the smaller breakpoint by giving images and paragraphs that should be together the same order.

See the Pen
Impossible Layout — Solved with CSS Grid
by Dannie Vinther (@dannievinther)
on CodePen.


This really reminded me of an article I wrote a number of years ago called Content Folding, which is essentially a great use-case for CSS regions, which are ☠️ dead for the time being.

The polyfilled demo still works though.

With this (dead) version of regions, you could specify elements that content should flow into when they overflowed. Pretty cool idea and extremely useful, if a little semantically awkward. Now that we have CSS grid, and could overflow content from grid cell to grid cell, it would be even cooler.