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.
No description
2 Replies
Zoë
Zoë10mo ago
I think you need to click the + next to grid items
Zoë
Zoë10mo ago
Also, you can inspect elements and where it says "grid" (or "flex") you can click it and it will show lines, you can change what is visible
No description
Want results from more Discord servers?
Add your server