Thanks, but I found my error - my problem was that all of the grid defining I was doing was within a vertical stack of its own. In the last few days, I’ve learned a lot about CSS grids. Here’s what I’ve got currently:
a
a
2 Likes
What was the YAML that you ended up getting this running with? I’m just starting out on this grid journey.
Sorry, just getting back to this. Here’s what I used:
- visible:
- user: xxxx
- user: xxxx
type: custom:grid-layout
title: Front Door Camera
icon: mdi:video-outline
background: center / cover no-repeat url("/local/images/background3.jpg") fixed
path: front_door_camera_front_door_tablet
layout:
grid-template-rows: 80px 640px 80px
grid-template-columns: 93px 1184px
grid-template-areas: '"header header" "buttons main1" "footer footer"'
badges: []
cards:
- type: vertical-stack
cards:
- type: conditional
conditions:
- entity: input_boolean.pool_open
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:button-card
name: Home
color_type: label-card
color: rgba(7, 103, 215, 0.24)
icon: mdi:home
styles:
card:
- width: 80px
- height: 72px
tap_action:
action: navigate
navigation_path: /front-door-tablet/main_front_door_tablet
- type: custom:button-card
name: Lights
color_type: label-card
color: rgba(7, 103, 215, 0.24)
icon: mdi:lightbulb
styles:
card:
- width: 80px
- height: 72px
tap_action:
action: navigate
navigation_path: /front-door-tablet/lights_front_door_tablet
- type: custom:button-card
name: Cameras
color_type: label-card
color: rgba(7, 103, 215)
icon: mdi:video
styles:
card:
- width: 80px
- height: 72px
tap_action:
action: navigate
navigation_path: /front-door-tablet/front_door_camera_front_door_tablet
- type: custom:button-card
name: Media
color_type: label-card
color: rgba(7, 103, 215, 0.24)
icon: mdi:speaker
styles:
card:
- width: 80px
- height: 72px
tap_action:
action: navigate
navigation_path: /front-door-tablet/media_front_door_tablet
- type: custom:button-card
name: Pool
color_type: label-card
color: rgba(7, 103, 215, 0.24)
icon: mdi:pool
styles:
card:
- width: 80px
- height: 72px
tap_action:
action: navigate
navigation_path: /front-door-tablet/pool_front_door_tablet
- type: custom:button-card
name: Weather
color_type: label-card
color: rgba(7, 103, 215, 0.24)
icon: mdi:weather-partly-cloudy
styles:
card:
- width: 80px
- height: 72px
tap_action:
action: navigate
navigation_path: /front-door-tablet/weather_front_door_tablet
- type: custom:button-card
name: Energy
color_type: label-card
color: rgba(7, 103, 215, 0.24)
icon: mdi:flash
styles:
card:
- width: 80px
- height: 72px
tap_action:
action: navigate
navigation_path: /front-door-tablet/energy_front_door_tablet
- type: custom:button-card
name: Mail
color_type: label-card
color: rgba(7, 103, 215, 0.24)
icon: mdi:mailbox
styles:
card:
- width: 80px
- height: 72px
tap_action:
action: navigate
navigation_path: /front-door-tablet/mail_front_door_tablet
- type: custom:button-card
name: Calendar
color_type: label-card
color: rgba(7, 103, 215, 0.24)
icon: mdi:calendar-clock
styles:
card:
- width: 80px
- height: 72px
tap_action:
action: navigate
navigation_path: /front-door-tablet/calendar_front_door_tablet
- type: conditional
conditions:
- entity: input_boolean.pool_open
state: 'off'
card:
type: vertical-stack
cards:
- type: custom:button-card
name: Home
color_type: label-card
color: rgba(7, 103, 215, 0.24)
icon: mdi:home
styles:
card:
- width: 80px
- height: 80px
tap_action:
action: navigate
navigation_path: /front-door-tablet/main_front_door_tablet
- type: custom:button-card
name: Lights
color_type: label-card
color: rgba(7, 103, 215, 0.24)
icon: mdi:lightbulb
styles:
card:
- width: 80px
- height: 80px
tap_action:
action: navigate
navigation_path: /front-door-tablet/lights_front_door_tablet
- type: custom:button-card
name: Cameras
color_type: label-card
color: rgba(7, 103, 215)
icon: mdi:video
styles:
card:
- width: 80px
- height: 80px
tap_action:
action: navigate
navigation_path: /front-door-tablet/front_door_camera_front_door_tablet
- type: custom:button-card
name: Media
color_type: label-card
color: rgba(7, 103, 215, 0.24)
icon: mdi:speaker
styles:
card:
- width: 80px
- height: 80px
tap_action:
action: navigate
navigation_path: /front-door-tablet/media_front_door_tablet
- type: custom:button-card
name: Weather
color_type: label-card
color: rgba(7, 103, 215, 0.24)
icon: mdi:weather-partly-cloudy
styles:
card:
- width: 80px
- height: 80px
tap_action:
action: navigate
navigation_path: /front-door-tablet/weather_front_door_tablet
- type: custom:button-card
name: Energy
color_type: label-card
color: rgba(7, 103, 215, 0.24)
icon: mdi:flash
styles:
card:
- width: 80px
- height: 80px
tap_action:
action: navigate
navigation_path: /front-door-tablet/energy_front_door_tablet
- type: custom:button-card
name: Mail
color_type: label-card
color: rgba(7, 103, 215, 0.24)
icon: mdi:mailbox
styles:
card:
- width: 80px
- height: 80px
tap_action:
action: navigate
navigation_path: /front-door-tablet/mail_front_door_tablet
- type: custom:button-card
name: Calendar
color_type: label-card
color: rgba(7, 103, 215, 0.24)
icon: mdi:calendar-clock
styles:
card:
- width: 80px
- height: 80px
tap_action:
action: navigate
navigation_path: /front-door-tablet/calendar_front_door_tablet
view_layout:
grid-area: buttons
- type: vertical-stack
cards:
- type: picture-entity
entity: camera.xxxx
name: Front Door
show_name: true
show_state: false
camera_image: camera.xxxx
tap_action:
action: navigate
navigation_path: /front-door-tablet/main_front_door_tablet
aspect_ratio: '1.78'
view_layout:
grid-area: main1
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.time_formatted
show_state: true
show_name: false
show_icon: false
name: ''
color_type: label-card
color: rgba(7, 103, 215, 0.00)
styles:
card:
- background-color: rgba(7, 103, 215, 0.00)
- padding: 2%
- box-shadow: none
state:
- color: white
- font-size: 40px
- text-shadow: 0px 0px 3px black
- justify-self: left
tap_action:
action: null
hold_action:
action: null
- type: custom:button-card
entity: sensor.day_date_formatted
show_state: true
show_name: false
show_icon: false
name: ''
color_type: label-card
color: rgba(7, 103, 215, 0.00)
styles:
card:
- background-color: rgba(7, 103, 215, 0.00)
- padding: 2%
- box-shadow: none
state:
- color: white
- font-size: 40px
- text-shadow: 0px 0px 3px black
- justify-self: right
tap_action:
action: null
hold_action:
action: null
view_layout:
grid-area: header
There are two conditional cards that show the entire group of relevant buttons based on whether the pool is open or closed. I’m sure there’s a better way to do that. I also didn’t use any style templates in here, and that’s something I want to get into soon.
1 Like
I want to thank all the people who have gone to the trouble post working examples here. Like many other people, when I just got started with grid layouts, I found it very difficult to actually author the YAML correctly. (Don’t get me started about how tedious it is to do anything complex in YAML. It’s basically a dumb choice if humans have to interact with it.)
It seems that the grid layouts and HA may have separately evolved over time, but with some of the samples here, I was able to get things working today after wasting a bunch of time failing to create a configuration from scratch.
Thanks again to all who pitched in to help! (Even though you didn’t know I’d be coming along looking for that help months later. 
.
1 Like
Ok, nice to see this topic, I’m kinda stuck too…trying to create a wallpanel layout, but having issues with the sizing.
The layout is quite simple but I seem to keep running into problems whatever I try. The goal is a dashboard for a Tab7 Lite, the picture below gives an idea of the layout, layout blocks a to g, a divided in a1/a2+a3, the cblock in 4 or 5 rows, gblock spanning both rows.
views:
- theme: Backend-selected
title: Kiosk
path: main
icon: mdi:alarm-panel
type: custom:grid-layout
layout:
grid-template-columns: 2fr 2fr 2fr 2fr 1fr
grid-template-rows: 300px 300px
grid-template-areas: |
"ablock cblock eblock eblock gblock"
"bblock dblock fblock fblock gblock"
The trouble lies with that I would expect that giving a grid-template-row of 50% 50% I would have the a nice even split, but I need to go to an exact 300px-300px (which will only work on the T7Lite), as to grid-template-columns, tried all sort of things, fractal seems to work. (Using it with row leaves a lot of screen estate unused)
It get’s worse when I try to subdivide a block as you can see in the picture
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr
grid-template-rows: 70% 30%
grid-template-areas: |
"a1block a1block"
"a2block a3block"
cards:
- type: custom:layout-card
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sensor.klimaat_woonkmr_temperature
show_state: true
name: Temperatuur
layout_type: custom:grid-layout
layout:
view_layout:
grid-area: a1block
view_layout:
grid-area: a1block
- type: custom:layout-card
cards: ...........
To me it seems I’m missing something.
have you find a solution? i’m interested too
yes, it was due to my sidebar layout being more rows than the rooms, i added extra rows in the room layout and is now fine.
grid-template-areas: |
"sidebar room1 room2 room3 room4 "
"sidebar room5 room6 room7 room8 "
"sidebar room9 room10 room11 room12 "
"sidebar . . . . "
"sidebar . . . . "
3 Likes
Hi @andyblac, I know this is off-topic but your setup looks amazing! Would you mind sharing some details like the theme and what kind of cards you are using (especially those button cards for the rooms and that amazing weather forecast)? Thank you so much!
hi, my custom cards are for the integration GitHub - UI-Lovelace-Minimalist/UI: UI-Lovelace-Minimalist is a "theme" for HomeAssistant and my cards are available here My Custom Cards for Minimalist UI
As for the weather it is using Clock Weather Card and Lovelace Hourly Weather
heres the code i use https://github.com/andyblac/HA_config_files/blob/ce7e0f219dda460bb3797fa3b97dfedd0f4f2ba1/ui_lovelace_minimalist/dashboard/main/sidebar.yaml#L5C1-L84C1
2 Likes
Thank you so much!! I’ll give it a go, we’ll see how my dashboard ends up looking 
i’ll be happy to help in my thread if you get stuck using my cards.
1 Like
Hello Andyblac,
Happy new year to you Sir, I found this forum by chance and I am quite impressed about your dashboard.
I will like to have dashboard similar to yours, for example, the bedroom cards.
I tried everything but I am not able to reproduce your bedrooms cards showing various entities.
title: Bedroom
area: bedroom
hide_unavailable: false
tap_action:
action: navigate
navigation_path: /config/areas/area/bedroom
entities:
- light.ceiling_light_2
- light.bedroom_lights
- switch.siren_alarm
- switch.bedroom_fridge_socket_1
- sensor.siren_battpercentage
- sensor.kwame_s_echo_dot_next_alarm
- binary_sensor.motion_sensor_occupancy
- binary_sensor.bedroom_window_sensor_contact
- binary_sensor.master_bedroom_door_contact
Could you please assist me with this?. I am a new home assistant and I have no coding background.
Your assistance will be extremely helpful.
Regards
Kwame
Hello Andy,
I wonder if you could please check my previous comment for me, Sir.
Regards,
Kwame
I am trying to build a simple dashboard but struggling with the layout design. One of my camera is wide angle and it needs bit of a space. I am using layout card. The first two columns (weather and camera) works great but not sure how to align the bottom room cards. The moment add cards to column 3, it extends with the camera card.
grid-template-columns: 10% 30% 50% 10%
grid-template-rows: auto
grid-template-areas: |
“h1 h2 h3 h4”
this is what I want to create:
I tried to separate the last two rows for the room cards with custom-layout but no luck.
Any suggestions please? Thanks
try something lke that:
type: custom:layout-card
layout_type: grid
layout_options:
grid-template-columns: 5% 33.3% 33.3% 33.3% 5%
grid-template-rows: auto auto auto
grid-template-areas: |
"s1 weather camera camera s2"
"s1 room1 room2 room3 s2"
"s1 room4 room5 room6 s2"
This assumes you want to have each card to take 30% of page width and have small margins left on left and righ side of the screen. In grid definition these are represented by s1 and s2. Do not forget to put into your actual cards information about their placement in respective cells.
cards:
- type: your camera card type
view_layout:
grid-area: camera
. . .
Layout_option didn’t work for me so I changed back to layout: and it worked a like charm 
I also made a few minor adjustments to the column percentages and everything seems to work as I expected. Thank you Mirek.
Working code for me:
type: custom:grid-layout
layout_type: grid
layout:
grid-template-columns: 5% 30% 30% 30% 5%
grid-template-rows: auto auto auto
grid-template-areas: |
“s1 weather camera camera s2”
“s1 room1 room2 room3 s2”
“s1 room4 room5 room6 s2”
HI All, before I spend loads of time doing grids with in grids with in grids, Is Grids even the most suitable layout tool for what I am trying to create below:
1 Like
You could do vertical within horizontal within … etc
Just what you decide to do
Bit of information overload in this thread so thought i’ll just be bold and ask the question lol
What is the best way to get a grid layout similar to the image below ?
Dont worry about the actual contents of the image im more interested in the button layout and how to replicate it in my lovelace