I would like to have a landscape grid layout for my wall tablet, anyone have YAML or a how-to on making the default vertical grid into a horizontal grid? (Yes I read the doc and searched the web and this forum first)
thank you!
Is controlling the layout via the view type an option?
For example, add 4 separate Advanced Camera Card’s to a Sections dash and control the layout controls.
The advanced card has its own built-in grid layout. I was looking for info on if that can be made to be in landscape format – the docs dont say anything about grid other than it exists
Test this and let me know. You can’t duplicate cam feeds
type: custom:advanced-camera-card
cameras:
- camera_entity: camera.1
- camera_entity: camera.2
- camera_entity: camera.3
- camera_entity: camera.4
live:
display:
mode: grid
If you use the advanced card you’ll know it only displays a vertical stacked grid using that yaml.
I have 10 cams, I want it Horizontal / Landscape – not vertical.
A bit combative, I have advanced card installed. How about a primitive image of what you want? Stating you want a landscape vs a vertical grid is not intuitive.
CSS Grids are defined by columns and rows. The grid flow defines where the grid items are placed.
A good resource
Ha cards are limited in width unless the dash view is changed. Card mod can be used to manually adjust the main card’s width.
The main card does have card dimension options
You will most likely need to use Panel mode with the card’s grid option
1 Like
Thanks for the help. It would help if you can post the YAML you used to do the lower, horizonal display, that is what I need for the tablet 16x9 landscape view. I love the functionality of the ACCs built-in grid and just want to “turn it landscape”
side note: Combining CSS with custom cards seems to be very hit-miss. Remember this attempt (probably 8 hrs spent)… is my first ‘large attempt’ at using a some basic CSS + custom card; with & without HA’s ‘grid layout’ page view… this has been a nightmare. I got it working except the scrolling so posting there again also to see if anyone has ideas.
thx!
I’ve not been able to figure out how you made yours landscape?
I will get you more info this evening when I get back home. Been away for the last two days.
1 Like
thank you!
Test this code 
You’ll need
custom:layout-card- Create a new view using Grid(layout-card)
- Add the
custom:advanced-camera-card
Card Code
type: custom:advanced-camera-card
cameras:
- camera_entity: camera.1
- camera_entity: camera.2
- camera_entity: camera.3
- camera_entity: camera.4
- camera_entity: camera.5
- camera_entity: camera.6
- camera_entity: camera.7
- camera_entity: camera.8
- camera_entity: camera.9
- camera_entity: camera.10
live:
display:
mode: grid
grid_columns: 5
grid_max_columns: 5
grid_selected_width_factor: 1
Let me know what issues you run into. We may need to define individual aspect_ratios and layout types for the cameras.
You can also test the Panel view type
I’ve done a lot of testing with different YAML. I could not get anything to scale rows/columns to the actual limits of the display resolution / dimensions.
Seems the Advanced Camera Card’s internal grid does not allow for this. Layout Card is just a wrapper with no influence on who ACC’s grid works; which is why layout card’s Panel type allows it to expand BUT Panel still does not auto-scale to the actual display boundaries.
I’m going to put in a feature request. I’m really surprised this card, as awesome as it is, doesnt have a way to automatically fill the screen limits.
I’m using two separate YAMLs for now:
Landscape…
type: panel
path: ""
cards:
- type: custom:advanced-camera-card
cameras:
- camera_entity: camera.front_door_live_view
- camera_entity: camera.bi5_driveway_84
- camera_entity: camera.bi5_entry_82
- camera_entity: camera.bi5_living_room_91
- camera_entity: camera.bi5_deck_large_95
- camera_entity: camera.bi5_89
- camera_entity: camera.bi5_88
- camera_entity: camera.bi5_playroom_87
- camera_entity: camera.bi5_kitchen_86
- camera_entity: camera.bi5_kitchen_92
- camera_entity: camera.bi5_patio_83
live:
display:
mode: grid
grid_columns: 5
status_bar:
style: hover-card
dimensions:
aspect_ratio_mode: dynamic
title: Cams wide
Portrait…
type: custom:vertical-layout
title: cameras
path: cameras
icon: mdi:cctv
cards:
- type: custom:advanced-camera-card
cameras:
- camera_entity: camera.front_door_live_view
double_tap_action:
action: more-info
- camera_entity: camera.bi5_driveway_84
double_tap_action:
action: more-info
- camera_entity: camera.bi5_entry_82
double_tap_action:
action: more-info
- camera_entity: camera.bi5_patio_83
double_tap_action:
action: more-info
- camera_entity: camera.bi5_deck_large_95
double_tap_action:
action: more-info
- camera_entity: camera.bi5_living_room_91
double_tap_action:
action: more-info
- camera_entity: camera.bi5_89
double_tap_action:
action: more-info
- camera_entity: camera.bi5_88
double_tap_action:
action: more-info
- camera_entity: camera.bi5_playroom_87
double_tap_action:
action: more-info
- camera_entity: camera.bi5_kitchen_86
double_tap_action:
action: more-info
- camera_entity: camera.bi5_kitchen_92
double_tap_action: more-info
view: {}
live:
display:
mode: grid
grid_columns: 2
reflow: true
dimensions:
aspect_ratio_mode: dynamic
menu:
position: top
buttons:
screenshot:
enabled: true
play:
enabled: true