Yes it is! That is a typical case for a grid layout. Read up on it here: https://css-tricks.com/snippets/css/complete-guide-grid/
It is possible on 2 columns:
align one to the left and one to the right
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 50% 50%
----> place-items: start end
grid-template-rows: auto
cards:
I have the same question.
- I use a dashboard in panel mode
- There is a single a vertical-stack card
- Inside the vertical stack are multiple custom layout-cards
- Each layout-card is using a horizontal layout type
- Each layout-card is set to “width: 90” (because I want 90px wide buttons)
My goal is to have:
- A dashboard that is the full width of every screen i use (
) - Each horizontal layout card placed vertically within a single column ()
- Entities within the horizontal layout card to be arranged in rows, which fill the screen and wrap to a new row when necessary ()
- Horizontal layout cards with only a single entity to force the entity to be left-justified (
)
It seems that if my horizontal layout card has enough content to fill the width of the screen (and then wrap to the next line), the justification does work and the resulting cards are aligned to the left.
But if the cards are not wide enough to fill the screen, then the cards within the layout-card are centered.
What am I doing wrong?
It’s too complicated, please help me.
type: 'custom:layout-card'
layout_type: grid
layout:
grid-template-columns: 80% 20%
place-items: start end
grid-template-rows: auto
cards:
- aspect_ratio: 16x9
camera_view: live
entity: camera.ezviz
show_state: false
show_name: false
type: picture-entity
- type: 'custom:button-card'
entity: binary_sensor.presenza_sonoff
icon: 'mdi:walk'
styles:
card:
- height: 120px
- width: 120px
- type: 'custom:button-card'
entity: binary_sensor.porta_garage
icon: 'mdi:door'
styles:
card:
- height: 120px
- width: 120px
- type: 'custom:button-card'
entity: input_boolean.escludi_segnalaz_garage
styles:
card:
- height: 120px
- width: 120px
This is the result
You want to use grid-template areas. The place_self option only aligns the card inside it’s grid square. Look at the link that is posted in the guide for a better explanation. It also explains grid areas.
The grid example in the guide also shows how to use grid areas if you need to see a working example.
type: 'custom:layout-card'
layout_type: grid
layout:
grid-template-columns: 80% 20%
grid-template-rows: auto
grid-template-areas: |
"main side"
"main side2"
"main side3"
cards:
- aspect_ratio: 16x9
camera_view: live
entity: camera.ezviz
show_state: false
show_name: false
type: picture-entity
view_layout:
grid_areas: main
- type: 'custom:button-card'
entity: binary_sensor.presenza_sonoff
icon: 'mdi:walk'
styles:
card:
- height: 120px
- width: 120px
view_layout:
grid_areas: side
- type: 'custom:button-card'
entity: binary_sensor.porta_garage
icon: 'mdi:door'
styles:
card:
- height: 120px
- width: 120px
view_layout:
grid_areas: side2
- type: 'custom:button-card'
entity: input_boolean.escludi_segnalaz_garage
styles:
card:
- height: 120px
- width: 120px
view_layout:
grid_areas: side3
1 Like
I spend a few days trying to create a fully responsive layout base on a grid card and all I can say is that this card is useless without a complete tutorial on how to use it. All of the information available now are based on the old version and now it is so confusing that it is almost impossible to understand.
2 Likes
Taking the number of downloads / installations into account, it seems more like a problem between the keyboard and the chair, at least in your case. 
So after setting the right tone, let me assure you, this card is everything but useless. The problem is, and that is not only you, that people think, this card does all the work, while it only provides the possibility to setup nearly everything you want.
If you don’t understand how the grid system works, than you won’t understand how to use this card (at least the grid-layout type).You do need to learn the grid system, as this is the basic knowledge you need. As posted above there is a website that tells you everything you need, and Google would be another source of tutorials about the grid system and how it works. Don’t blame the card, if it is just not understanding the underlying system.
But if you want help with some specific layout, you should post some code and the errors you are having. That doesn’t mean there will be someone who is coding your layout for you, but in most cases there will be some users around, that can help you further.
Hey guys. Just for starters, I really love the Layout-Card. However with version 2.2 (the breaking one) im trying to get everything to look the way it did before. And I’m getting really close, but this little thing I cannot get my head around. And I hope someone can help.
I have a view in panel mode. In the view I have an auto entities card that shows all devices I track on my network as button cards with their IP addresses.
Before the breaking change it showed 7 columns with devies, but after is only shows 4, no matter how much space I have or what I set in my card config.
This is my config:
type: 'custom:auto-entities'
card:
type: 'custom:layout-card'
layout: horizontal
column_num: 7
view_layout: horizontal
filter:
include:
- domain: device_tracker
options:
type: 'custom:button-card'
size: 65%
show_entity_picture: true
style: |
ha-card {
background: none;
box-shadow: none;
}
styles:
grid:
- grid-template-areas: '"i" "n" "ip"'
card:
- height: 130px
- width: 130px
name:
- font-size: 13px
custom_fields:
ip:
- align-self: center
- justify-self: center
- font-size: 12px
custom_fields:
ip: |
[[[
return `<span><span style="color: var(--text-color-sensor);">IP: ${states['this.entity_id'].attributes.ip}</span></span>`
]]]
exclude:
- entity_id: device_tracker.telefoon_duncan
- entity_id: device_tracker.telefoon_sabrine
sort:
method: friendly_name
numeric: true
This shows like:
I have tried changing the column_num: 7 (which used to work) to columns: 7 and also setting min_columns: 7 but nothing seems to change the number of columns.
However when I change the card type from custom:layout-card to glance, it does work…
Would really appreciate some help, as I just can’t seem to figure out why it doesn’t work anymore…
Can someone give an example of using a break with
type: custom:layout-break
I had
- break
and that always worked fine. But since yesterday that broke.
Hi John,
You have to use it as an extra card in between the other cards like so:
type: 'custom:layout-card'
layout: vertical
column_width: 100%
cards:
- type: 'custom:simple-clock-card'
use_military: false
hide_seconds: true
style: |
ha-card {
border: solid 2px var(--primary-color);
background-color: var(--ha-card-background);
}
- type: 'custom:layout-break'
- type: weather-forecast
entity: weather.fam_bloom
Hope this helps
Thanks, But when I replace my old “-break” command with that, I get an erro
"Custom element doesn't exist: layout-break.
type: 'custom:layout-break'"
Update: Fixed the error by adding “?v=1” at the end of the resource string. But the new break does not work yet. But will look at this later today.
Post the code… 
I would, but it’s such a long page of code that it’s a bit too much I think.
But I think the problem is that I was also using “type: horizontal-stack” .
I think that was a different frontend component.
So most likely I just need to redo everything and just use this component.
Thats basically what I did with all places that I used layout-card in. But for some reason I just cant get 1 thing to work like before. Like I mentioned in my post above.
If anyone could help that would be much appreciated.
Edit: after fondling around for over a day, I think my issue is not caused by the layout-card but by the auto-entities card. So switching over to that topic.
You do realize, that without the code nobody can help you… If you take a look at duncan86s post above, you see that even bigger chunks of code will not get in the way of readability.
If you want help, post code chunks or the whole code. If this doesn’t fit, someone will delete it / clean it up.
I know, I know but the code was so bad. So I just decided to start over and now it works perfectly.
Was actually a good reason to do some spring cleaning of my lovelace
1 Like
Maybe silly question, I did not find the answer for, how to use !include (templates) within
type: custom:layout-card
layout_type: grid-layout
?
I mean - how to apply following
view_layout:
grid-column: 1 / 2
grid-row: 1 / 2
for example to
!include templates/buttons/button_gate.yaml
You can set the view_layout data right within the Lovelace UI:
In code editor this results in:
type: 'custom:layout-card'
layout_type: grid
layout:
width: 100%
grid-template-columns: 1fr 1fr
grid-template-rows: auto
cards:
- ...
I think that the option to use CSS grids is a huge step for HA.
A big THANK YOU to @thomasloven for this great work (and for all his other add-ons that I’m using extensively).
One problem that I could not solve so far:
If I create nested grid elements (grid cards within a grid layout) the nested grid cards get a left and right margin of 4px. This gives them an unwanted indentation as compared to other elements in the same column (see screenshot). Is there any way to get rid of these margins? I tried Card Mod to inject additional CSS but did not succeed.
Hi guys looking for some help with my tablet interface. This is going to be a wall mounted tablet.
What I am trying to create:
This is the basic framework of my interface.
Outter Shell
The sidenav/ header and footer should not change regardless of what nav button I press.The main section will be a layout card with nest picture elements and button cards.
This is my code:
Sidnav: https://paste.ubuntu.com/p/mqVrHc3KkY/
Header/Main/Footer code: https://paste.ubuntu.com/p/Wsy7ckBgnm/
This is the code for the whole view: https://paste.ubuntu.com/p/yyb7JJpKdw/
What is not working :
- How to I ensure that the layout card will only use the available screen size height and width, so that I have no left side scrollbar.
- Is the a way to force a background image to fit within the specs of the
grid-template-row? - Is there a better way to approach this interface?
views:
- path: default_view
title: Home
layout:
grid-template-columns: 1fr 9fr
gap: 0px
grid-template-rows: auto
grid-template-areas: |
"sidenav header"
"sidenav main"
"sidenav footer"
panel: false
type: 'custom:grid-layout'
badges: []
cards:
- type: 'custom:stack-in-card'
layout:
grid-area: sidenav
cards:
- type: 'custom:button-card'
tap_action:
action: toggle
size: 60px
name: Home
icon: 'mdi:home'
entity: null
- type: 'custom:button-card'
tap_action:
action: toggle
size: 60px
name: Security
icon: 'mdi:security'
entity: null
- type: 'custom:button-card'
tap_action:
action: toggle
size: 60px
name: Lights
icon: 'mdi:lightbulb-group-outline'
entity: null
- type: 'custom:button-card'
tap_action:
action: toggle
size: 60px
name: Media
icon: 'mdi:theater'
entity: null
- type: 'custom:button-card'
tap_action:
action: toggle
size: 60px
name: Climate
icon: 'mdi:air-conditioner'
entity: null
- type: 'custom:button-card'
tap_action:
action: toggle
size: 60px
name: Weather
icon: 'mdi:weather-partly-cloudy'
entity: null
- type: 'custom:button-card'
tap_action:
action: toggle
size: 60px
name: Devices
icon: 'mdi:settings'
entity: null
- type: 'custom:button-card'
tap_action:
action: toggle
size: 60px
name: Picture elements card
icon: 'mdi:settings'
entity: null ```
Header/Main/Footer code:
```- type: 'custom:stack-in-card'
cards:
- type: 'custom:layout-card'
cards:
- type: 'custom:button-card'
layout:
grid-area: header
color_type: card
color: 'rgb(28, 128, 199)'
styles:
card:
- height: 20px
- padding: 0px 0px 0px 0px;
- type: picture-elements
layout:
grid-area: main
elements:
- type: state-badge
entity: binary_sensor.early_morning
style:
top: 32%
left: 40%
padding: 0px 0px 0px 0px;
image: /local/images/backgrounds/spring_scenery-1920x1080.jpg
- type: 'custom:button-card'
layout:
grid-area: footer
color_type: card
color: 'rgb(66, 210, 0)'
styles:
card:
- height: 20px
- padding: 0px 0px 0px 0px;
layout_type: grid
layout_options:
gap: 0px
grid-template-columns: 100%
grid-template-rows: 5% 90% 5%
grid-template-areas: |
"header"
"main"
"footer"```