Designing Your Views

So now you've got HA up and running. It's finding devices and you're figuring out how to add cards to  views and make dashboards. By now, you've probably figured out that it's fairly easy to MAKE cards, but it's much more difficult to ARRANGE the cards so they look nice. I struggled with that for a little while. I'd add a card, then another, then another, and I could never get them to fit quite right and in the order I wanted.

Let me save you a little trouble. Learn how to "nest" your cards.

Remember that in HA, you have "views" that show in tabs across the top, and "dashboards" that show in tabs down the left side. I wanted to make sure we're on the same page here (no pun intended).

HACS

The very first thing you're going to want to do is get the "Home Assistant Community Store" integration ("HACS"). If you don't download or install anything else for HA, you're going to want this one. It will make your life easier when you want to add new things to your HA set up.

Layout-Card

Once you get HACS, you'll need a front-end addition called "layout-card." Grab that through HACS and install it.

Once you have both HACS and layout-card, we're ready to start making new views.

New View

What I found that works easiest for me is to create a new view and use the "Grid (layout-card)" view type. That sets the stage for the new view to be laid out in a basic grid pattern that I can control. Once you've created that new view, you should be looking at a blank screen. Now - here's where we start getting tricky.

You're going to add a new card - and it's going to be a blank "Grid" card. You'll also need to determine how many columns you want this new view to contain. Most of mine are 3 columns, although I do have a couple of views that are only 2. The only important things here are setting the number of columns and also, turn OFF the "Render cards as squares" selection. That makes things look really goofy if you don't.

Your card should look something like this now:

At this point, you must have an idea of what your first column (left side of the screen) is going to look like. Let me show you an example of what I have in one of my views:

There is absolutely no way you'd be able to stack these cards correctly in a standard grid or stack view. It's simply not possible. So, this is where you need to "nest" your grids. Let's dissect this first column.

The very first card I added to this column is a markdown card. That creates the "Interior" header. No issues there.

But then, I wanted to create two distinct columns of entities - single lights and groups. Focus on the keyword here: columns. How do you handle that? You simply add a 2-column grid card as your next card under the header markdown. Doing that, I now have a 2-column grid that I can manipulate however I see fit. Column 1 is a vertical stack of entity cards, and column 2 is a vertical stack of button cards. And they are arranged nicely, in the order I desire.

Here is (most of) the display that shows in my "cockpit" (my office) all day:

I've taken a 3 column grid for the main card and then addressed every column as it's own design area. This means nesting grid cards inside grid cards in some places. For example, look at the "Network Status" area. The header "Network Status" is a markdown card that takes up the entirety of column 2. The next card I added, however, was another grid card that is 3 columns wide. I could then add 6 different entities in there, arranged nicely, and how I wanted them arranged. I finished it up with another markdown card for the footer.

Give it a try. I absolutely 100% guarantee you will not like your first attempt. You probably won't like your second attempt either. What you see as my cockpit view comes after no less than 10 attempts to get it looking exactly like I want it. But remember that every time you fail, you learn a little more. Heck, there are a couple things I'm thinking about changing on this cockpit view.

Oh, and if you like the Star Trek looking "LCARS" view, guess where you can get that? Yep - HACS. I have a blog post about that coming up later.

Start making your views. Experiment and have fun. Learn how to nest grids and stacks inside other grids. It will make things look much better for you.

Until the next post...  rock on.