So, you work with Home Assistant and struggle with setting up your dashboard? Those days are over now. With the tips in this Home Assistant tutorial, you will be able to create a dashboard layout exactly the way you want it to be! Get total control over your Home Assistant Dashboard now!

---

⭐⭐⭐ NOTE: ⭐⭐⭐

This article accompanies a YouTube video. I wrote it for people who would rather read than watch a video. To keep doing this, I want to ask you to check out the video, leave a comment under the video, give the video a thumbs up, and subscribe to my YouTube channel. This means that the video is offered more often to new visitors so that they also stay informed of the latest Home Assistant tutorials.

Thank you for your support!

Ed

Click here to watch the video

Introduction to control your dashboard

When you start setting up a dashboard in Home Assistant, you’ll find out that it’s sometimes hard to position cards on your dashboard exactly the way you want. Cards seem to have their own opinion on where they pop up on the screen and it’s difficult to keep them in place. This is because Home Assistant uses the Masonry layout by default and that makes it difficult to control your dashboard.

The Masonry layout sorts cards in columns based on their card size, but that’s not always what you want. When I wanted to create a tablet layout for my Fire HD 10 that I wanted to mount on my wall, I wanted to create a fixed layout with cards in the exact place where I wanted them. Luckily, there’s a HACS integration for this that makes sure that you can position cards on your dashboard just how you want them.

But, before I explain how this works, please subscribe to my channel and hit the thumbs-up button for this video. This way, you make sure that I can keep creating these videos for you!

Install the layout card to control your dashboard

Let’s first install the custom layout card. You’ll need HACS for that. If you haven’t got HACS installed yet, please watch this video on how to do that. Check it out!

• Now go to HACS.
• Go to Frontend.
• Go to Explore and Download Repositories.
• Search for Layout card.
• Click Layout Card.
• Click Download, and click download again.
• Click Reload.
• Make sure you refresh your browser cache. You might also want to reboot Home Assistant to be totally sure that the layout card is installed.

Create a dashboard

The layout card is now installed. To see what it can do, we are going to create a new dashboard first.

• Go to Settings.
• Go to Dashboards.
• Click Add Dashboard.
• Let’s call this Dashboard “Tablet”.
• And give it the icon “tablet-dashboard”.
• Click Create.
• Now give the Tablet Dashboard link on the side menu a click.

What you see now is a dashboard that is filled with all the entities that exist in your system. It shows all cards categorized by Area in your house and you do not have any control over how the cards are positioned on your dashboard. Let’s change that!

• Click on the three dots in the right upper corner.
• Click Edit Dashboard.
• Now give the toggle “Start with an empty dashboard” a click.
• And click Take Control.

Explain the layout options

You’ll see an empty dashboard now! That’s great. Now we can start building a new dashboard. I am not going to explain how to build the Tablet dashboard that I made in this tutorial. That will be covered in another video, but I will show you how the various options of the layout-card work. When you click on the pencil icon next to the view “Home”, you see that the View Type Masonry (default) is selected. In that dropdown field, you can select some new view types that have been added by the layout-card integration.

In short, these options do the following:

• Masonry: The masonry layout shows the cards in the same way as the default Masonry option. It fills the screen automatically so that all cards are visible in the best possible way.
• Horizontal: The horizontal layout will add each card to the next column, looping back to the first one when necessary.
• Vertical: The vertical layout will add each card to the same column as the previous one.
• Grid: The grid layout will give you full control of your cards by leveraging CSS Grid. This is the most flexible way to show your cards, but it’s also the most challenging way if you’re not used to CSS. Don’t worry, I will explain later in this tutorial how it works!

Let’s skip the masonry layout because it does not give you full control over your dashboard. We’ll start with the Horizontal layout.

Horizontal layout

The horizontal layout will add each card to the next column, looping back to the first one when necessary. You can also place a card in an exact column. The following cards will be placed in the next column after that. Next to that, you can use a layout-break card to make sure that the next card will be placed in the first column. This gives you more control over your dashboard. Let me show you a quick example:

• I will use the same light card for this example.
• Let’s first set the layout type to horizontal.
• Click save.
• Now Add the card three times.
• As you can see, the cards are added horizontally.
• Now add the fourth card.
• You see that the card is added on the second row.

Show the 5th card in the third column

• Now let’s say that we want the 5th card to show in the 3rd column.
• We can do that by indicating in the card in what column it should show.
• Add the 5th light card.
• Click on Show Code Editor
• Now add the following lines
  view_layout:
  column: 3
• Click Save
• You’ll see that the 5th card is now shown in the 3rd column.
• Let’s add a 6th and 7th card
• You’ll see that the 6th card is shown on the next line and that the 7th card is shown in column 2 of the previous line. So, The cards will always fill up the first open space that is available in the column.

The horizontal layout option gives some more control over your layout, but it’s not as flexible as how I want it to work. Let’s try the vertical layout.

Vertical Layout

The vertical layout will add each card to the same column as the previous one. You can also place a card in an exact column. The following cards will be placed in the same column after that. Next to that, you can use a layout-break card to make sure that the next card will be placed in the next column. Let me show you a quick example:

• Create a new view by clicking on the + sign.
• Give it a title.
• And at view type select Vertical
• Click Save.
• Add two Light cards.
• You’ll see that the two cards are shown in the same column below each other.

Add the 3th Card

• Now, let’s say that we want the 3rd card to show in a second column.
• Add the 3rd card
• Click on Show Code Editor
• Now add the following lines
  view_layout:
  column: 2
• Click Save.
• The 3th card is now shown in the second column
• Now add a 4th and 5th card
• You see that these cards are now also shown in the second column, so they follow the setting of the last card that has the view-layout setting in it.
• Now add the 6th card in the third column.
• Add a new card.
• Click on Show Code Editor
• And add the following lines:
  view_layout:
  column: 3
• The sixth card is now shown in the third column.

This is how you can use the vertical card. This gives a lot of flexibility and works great for creating a dashboard that works on your desktop, tablets, and phones. If you resize the screen, the cards will be shown below each other in the order of the columns. I’ve used this vertical layout for a long time because it’s so flexible and it works great on desktops, phones, and tablets. But I wanted something which was even more flexible. This is where the grid layout comes in handy.

Grid Layout to control your dashboard

The grid layout is the most flexible way to control your layouts and it is also the most complex one, but I’m going to provide you with a layout template in this video that works really well. Once you’ve set it up, it’s quite easy to work with it and it gives total control over your dashboard. You can also download the template code using the link in the description below. It will save you time and frustration and you do not have to type the code from the screen. Let’s set it up now:

• Create a new view by clicking on the + sign.
• Give it a title.
• And at view type select Grid
• Click Save.

Define the grid

Now we are going to define layout areas on the screen. I want to create a layout like so:

I want a header that spans all columns. This header will contain my main menu. Then, I want an area that shows me warning messages in case something needs attention, for instance, if a battery is low. I want to show these messages in the middle column. We can do that by using a dot for each column that is not used. In this case, it’s declared as dot-messages-dot. After that, the main content area is shown which contains three columns. The column areas are called left, middle, and right. And I will finish with a footer to show a message in the middle column by using the code dot-footer-dot.

To create this, we have to add some YAML to our dashboard.

• Click on the three dots in the right upper corner.
• And click Raw Configuration Editor.
• Now add the following code below the type: custom:grid-layout line

You can view the code in the video or download the code here. 

• Make sure that you get the indentation of the code right otherwise it won’t work.
• Now, click on Save.
• And click the cross on the top left.

Create the header

• Now that we’ve declared the layout areas in our view, we can start adding cards to it. Let’s start with adding some menu buttons.
• I am using a Mushroom Chips card for the menu. You can install the mushroom cards using HACS as well. Just search for Mushroom in HACS and you’ll be fine.
• Let’s go back to our dashboard.
• Click Add Card
• Select the mushroom chips card
• Within the mushroom chips card, add three action cards and give them a name. We’re not going to add an action now. I will cover setting up a complete dashboard in another video. I will create a tutorial about how I’ve created my Tablet dashboard in the future, so make sure to subscribe to my channel so that you won’t miss it. For now, I only want to show how the layout card works.
• Click on Show Code Editor after you’ve added the chips.
• And add the following code:
  view_layout:
  grid-area: header
• Click Save

We just created a chips card that is shown in the Header Area. Because of the fact that the header area spans all three columns, the menu will be aligned left and can contain a lot of chips.

Fill the messages area

Now, let’s add a message to the messages area.

• Click on Add Card.
• Select the Markdown card.
• Enter a message in the content field.
• And click on Show Code Editor
• And add the following code:
  view_layout:
  grid-area: messages
• Click Save

Fill the three main columns

You’ll see that the warning message is shown in the middle column. This is because we indicated that the messages area is in the second column. Now let’s fill the three columns with content.

• Click Add Card
• Select a Light card
• Click Show Code Editor
• And add the following code:
  view_layout:
  grid-area: left
• Click Save

This card is indeed shown in the area that is called left. Now let’s repeat that for the 2nd and 3rd cards as well.

Add the middle and right column
Add two cards that are placed in the middle and right columns.

You’ll see that they are now correctly positioned in each column. Beware of one thing! If you add another card in the left column, it will be placed on top of the first card in the column. Let me show you what I mean.

• Duplicate the 1st light card and name it 4.
• Click on Save.
• You’ll see that the 4th card is now placed on top of the first light card. There are multiple ways to fix this, but the easiest way for me is to use either a grid or vertical stack card as a parent card for each column left, middle and right. So, I will define a vertical-stack card in the first column and fill it with the two light cards like so.
• Delete Card 1 and Card 4.
• Add a new card of type vertical stack.
• Add two light cards to the vertical stack card.
• Click Show Code Editor.
• Now add the following code:
  view_layout:
  grid-area: left
• Again, make sure that you get the code indentation right or it won’t work!
• Now click Save.
• The 1st and 4th cards are now shown below each other.

Again, there are multiple ways to fix this. If you want to know more about this, then take a look at this CSS Grid site where you can read all about CSS Grid and how to apply it.

Add the footer message

Let’s add a footer message too.

• Click Add Card.
• Select the Markdown Card.
• Enter a text in the content field.
• And click on Show Code Editor.
• Add the following code:
  view_layout:
  grid-area: footer
• Click Save.
• Click Done.

Conclusion of how to control your dashboard

So, now we’ve created a layout exactly the way we want it. We have a menu, a messages area, the main content area, and a footer area. There’s much more possible to make it truly responsive. You can read all about it in the documentation of the layout card. I hope I managed to explain how you can get total control over your dashboard layout. You can make this very fancy if you use Mushroom cards in your dashboard which I will cover in a future video on how I’ve set up my personal tablet dashboard.

I am able to create these tutorials thanks to these awesome people over here who are my supporters. You can also sponsor me through Patreon, Ko-Fi, or by joining my channel. See the links in the description below.

And don’t forget to give this video a thumbs up, subscribe to my channel, and hit the notification bell.

I will see you soon!

Bye bye!