Looking for ways to visual CSS Grid

Hi all. Looking for a little help. I know only a little about CSS but I have dabbled with it, html, php, etc over the years. I'm a Home Assistant user and I am looking to replicate some of my Alexa Show screens as Home Assistant 'cards'. These cards allow for CSS elements including grids. I think I understand the concepts but I am having trouble getting things right. I'm looking for a resource that allows me to fiddle with settings and see the results live. I found this site: https://www.cssgridplayground.com/ I am trying to split the first row into three separate parts as seen in the image I'm posting. Unfortunately I suppose the web app doesn't recognize the new areas I'm defining. Can someone tell me if I'm doing this incorrectly or if there is a different tool I can use to visual?

CSS Grid Playground

A simple interface for experimenting with CSS Grid Layout.