I thought this would be way more straightforward than it was. I looked at this as one large grid (five rows by seven columns). I tried defining grid-template-columns, grid-template-rows and grid-template areas. I gave a class to each div that would be red. If I had alternating red and white, I might define one row as "red . red . red . red". And then I would give the .red class a grid-area of red. I could not get this to work though! My solution is kind of hacky. I have three grids that are 3x3. I used flexbox and margin to position them to match the design.
