Overlapping CSS Grid columns

Example of CSS Grid items overlapping. I first started with the concept of using the "A Complete Guide to Grid"'s "Properties for the Parent" container image example. I mocked that up as an actual grid with grid items. Then I added the 2 example images from "Properties for the Children", as actual grid items, that contained the grid items ".item-a" and ".item-b" and overlapped them in my grid. So the example below is an actual grid container with grid items overlapping each other. The grid track lines are actually borders for each (base level) grid item and the grid items ".item-a" and ".item-b" not only overlap each other but that they also overlap the grid items that display the grid tracks. Each (.item-a/b) with a background color and 50% opacity.