Vigyata.AI
Is this your channel?

Did Grid Card kill the Horizontal and Vertical Stack? - Grid Card Tutorial - Home Assistant

14.2K views· 223 likes· 5:26· Nov 19, 2020

🛍️ Products Mentioned (6)

New Grid card in Home Assistant 0.118! Learn how to use it Sponsor me: https://github.com/sponsors/zsarnett ----------------------------------------------------------------------------------------------------------------------- Grid Card Documentation: https://www.home-assistant.io/lovelace/grid/ Grid Card Creator: https://github.com/sponsors/balloob Grid Config - Vertical Stack: https://pastebin.com/tCmKtdzh Grid Config - Horizontal Stack: https://pastebin.com/WWpmbxT0 Grid Config - Crazy: https://pastebin.com/xQyWav9C ----------------------------------------------------------------------------------------------------------------------- Music provided by Monstercat: Grabbitz - My Cloud https://youtube.com/monstercat https://youtube.com/monstercatinstinct #HomeAssistant #Lovelace #GridCard

About This Video

In this video I’m walking through the new Grid card that landed in Home Assistant 0.118, and why everyone’s been so hyped about it. I start with a basic Grid card setup so you can see what it does out of the box: it behaves a lot like a vertical stack, but adds two big options—columns and square. Square is on by default, and it tries to keep the cards you add looking uniform (nice and square/rectangle), which makes dashboards feel way more polished with almost no effort. Then I show how you can basically replace both vertical stack and horizontal stack with Grid. For a vertical stack look, I set columns: 1 and square: false, and it matches the vertical stack layout. For a horizontal stack look, I set columns to the number of cards (like 4) and square: false for a near-identical horizontal stack. The fun part is leaving square at the default true—especially for horizontal layouts—because in my opinion it looks better with improved padding and overall aesthetic. Finally, I demo a “crazy” but super practical idea: a grid inside a grid. In a panel mode view, I use a top-level Grid card with a picture entity card on the left and another Grid card on the right to stack buttons cleanly. Grid card is awesome, and I’m genuinely excited to see what you all build with it.

Frequently Asked Questions

🎬 More from Zack Barett