Grid Source-ordered Hero

Using Grid opens up some unique source order options.

+-------------+  
|             |  
|  a          |  
|             |  
+-------------+  
|             |  
|  b (image)  |  
|             |  
+-------------+  
|             |  
|  c          |  
|             |  
+-------------+  
  
  
+-----------+--------+  
|           |        |  
|  a        |  b     |  
|           |        |  
+-----------+        |  
|           |        |  
|  c        |        |  
|           |        |  
+-----------+--------+  

See the Pen Grid Hero with Source Order by Dave Cross (@davecross) on CodePen.

Tip

::before and ::after are first-class citizens in Grid. If you dig into the demo code, you'll see I used one of them to create the fade on the image.