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! 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! 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. 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. 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:
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. The horizontal layout will add each card to
the next column, looping back to the first one when necessary. The vertical layout will add each card to
the same column as the previous one. 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. 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. 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 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. 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. 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 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 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. 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. 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. Make sure that you get the indentation of
the code right otherwise it won’t work. Now, click Save. And click the cross on the top left. 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. 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. 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. Add the following code. Click Save. 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. 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 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. 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. 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. Click Save. Click Done. 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!
