Multiple rows / colums can be done like:
grid-row-start: auto
grid-row-end: span 2
grid-column-start: auto
grid-column-end: span 2
on the view options per grid item
I used a grid layout and was able to get what i was looking for.
Hello guys,
Do you know how to remove this difference from other cards using the grid layout-card?
margin: 0
grid-template-columns: 85% 1fr
grid-template-areas: |
"left right"
mediaquery:
"(max-width: 600px)":
grid-template-columns: 80% 1fr
grid-template-areas: |
"left right"
Thank you a lot for your help 
Use the margin: setting like this margin: -10px 0px 0px 0px
margin: -10px 0px 0px 0px
grid-template-columns: 85% 1fr
grid-template-areas: |
"left right"
mediaquery:
"(max-width: 600px)":
grid-template-columns: 80% 1fr
grid-template-areas: |
"left right"
1 Like
As an FYI to everyone using this: With the new 2024.06 update, layout-card dashboards break if they are using the break-card. The dashboard will all just be in one column instead of multiple.
Github issue is already present for this: Layout-break doesn't cause a column break in HA 2024.6 · Issue #291 · thomasloven/lovelace-layout-card · GitHub
I want to document the fix here. Editing the yaml configuration of the dashboard, changing this:
type: custom:vertical-layout
to this:
type: custom:layout-card
layout_type: custom:vertical-layout
The caveat with this fix is that the dashboard will no longer be editable in the GUI, just in YAML. But it should provide you with a quick fix until a fix is merged or you build an alternative dashboard (e.g. with vertical stacks).
3 Likes
I will wait for the Fix.
Or is there another card that does the same.
1 Like
I’m wondering the same. I have 5+ dashboards that uses the layout-card break and I’d hate to do this global config for each of them if a fix is right around the corner.
I don’t believe the Layout-card is being maintained any longer. 83 open issues at the moment and this fix has been waiting for three weeks.
So looks like I may have to indeed abandon layout-card. What alternatives have you guys been using? Specifically for adding breaks.
I’m looking as well. I strictly only use the grid-layout but haven’t found anything comparable.
Does anyone knows how to change this margin to 0px? I have tried many approaches using styles or card_mod but with no success:
add:
masonry-view-card-margin: "0"
to your theme yaml
I am sorry, first time doing this. Would it be in my card directly (if yes, how) or in my dashboard Raw configuration editor?
You’ll have to create a theme.yaml file to do this.
Install Studio Code Server on you HA instance (if not already present), open your config folder (this is where your configuration.yaml file is), create a new folder called “themes” and within that folder create a file yourthemename.yaml
in that file add the code mentioned by @sebbaT here. Then chose this as the theme for all the dashboards where this is relevant.
1 Like
max_columns: 3
I’m having problems making things go into columns. I have breaks in
everything is still in a single column
Stupid question from a pretty advanced Home Assistant user:
How do I install this via HACS? I don’t see it listed as Available.
I prefer to use HACS over the manual install to keep updates coming.
Thanks - Jonesie
My dashboard has been evolving, so I decided to standardize my layouts for each page, so I can manage the look and feel, but also make it responsive for my PC, phone and tablet.
I am using the layout card heavily.
My starting dashboard design for the learning curve is from [Madelena] with a few changes for what I want to do. (GitHub - Madelena/hass-config-public: My Dashboards for Home Assistant - Advanced data visualizations, responsive design, a neat maximalist Metro Live Tile layout, and an ultraminimal tablet layout!)
This is my main layout intent
#################################################
# RESPONSIVE LAYOUT #
#################################################
#default
margin: 0
#grid-gap: var(--custom-layout-card-padding)
grid-gap: 5px
grid-template-columns: 25px minmax(20%, 1fr) repeat(3, 1fr) 25px
grid-template-rows: 75px repeat(3, fit-content(100%)) 55px
grid-template-areas: |
". sidebar header1 header2 header3 ."
". sidebar c c c ."
". sidebar c c c ."
". sidebar c c c ."
". sidebar footer1 footer2 footer3 ."
mediaquery:
#phone
"(max-width: 800px)":
grid-gap: 5px
grid-template-columns: auto
grid-template-rows: auto auto auto repeat(5, auto)
grid-template-areas: |
"header1"
"header2"
"header3"
"sidebar"
"c"
"footer1"
"footer2"
"footer3"
#tablet
"(max-width: 1200px)":
grid-gap: 5px
grid-template-columns: minmax(20%, 1fr) 1fr 0fr
grid-template-rows: 75px 75px repeat(3, min-content) 55px auto
grid-template-areas: |
"header1 header1"
"header2 header3 ."
"sidebar c ."
"sidebar c ."
"sidebar c ."
"sidebar c ."
"sidebar footer1 ."
"footer2 footer3 ."
#tablet
"(max-width: 1920px)":
grid-gap: 5px
grid-template-columns: minmax(20%, 1fr) repeat(3, 1fr) 0fr
grid-template-rows: 75px repeat(3, fit-content(100%)) 55px
grid-template-areas: |
"sidebar header1 header2 header3 ."
"sidebar c c c ."
"sidebar c c c ."
"sidebar c c c ."
"sidebar footer1 footer2 footer3 ."
This works pretty well when I test with Chrome developers.
I have a question about area c.
I assumed that I can start placing cards in area c, and they will get placed one after the other in the 3 columns in c.
However, I get each card across the width of area c.
#Main Section of the dashboard page
- type: "custom:layout-card"
layout_type: "custom:grid-layout"
view_layout:
grid-area: c
# place-self: center auto
cards:
# [Column] Current Conditions
- type: custom:layout-card
layout_type: custom:grid-layout
layout: !include layouts/layout-live-tile.yaml
cards:
- type: 'custom:button-card'
template: header_card
variables:
name: CURRENT CONDITIONS
label: Accuweather
arrow: 'mdi:arrow-top-right'
action: url
link: !secret accuweather_url
view_layout:
grid-column-start: 1
grid-column-end: -1
- type: 'custom:button-card'
template:
- live_tile
- weather_precipitation
variables:
aspect_ratio: 2
entity: sensor.pirateweather_precip_probability
view_layout:
grid-column: span 2
This is what I get:
I added a layout card in area c.
My first question is, do I need to do that or am I missing something that will force cards onto the columns in area c as defined.
layout:
grid-template-columns: 'repeat(auto-fill, [col-start] minmax(356px, 1fr) [col-end])'
grid-template-rows: auto
grid-column-gap: 32px
margin: -1px
code now is:
#Main Section of the dashboard page
- type: "custom:layout-card"
layout_type: "custom:grid-layout"
view_layout:
grid-area: c
# place-self: center auto
layout: !include layouts/layout-page-columns.yaml
cards:
# [Column] Current Conditions
- type: custom:layout-card
layout_type: custom:grid-layout
layout: !include layouts/layout-live-tile.yaml
view_layout:
grid-column-start: 1
grid-column-end: -3
had to read up on column-start and -end to make sure it is still responsive.
Now it looks like I want it to look like, but it is not responsive.
with smaller screen, you can see the overlaps.
Any idea what I need to change? This is the most customization I have ever done with grid and layout-cards.
I would like for the behavior to be the following:
As the screen get smaller, the area c content goes from 3 columns to 2, then to 1, so the total dashboard would be going from 4 (including sidebar) to 3 to 2, then ultimately to 1.
If the change is in the area c Layout-card, how do I account for the sidebar? given that mediaquery is on a screen size, not a child area size?
Apologize for the length of the post, trying to understand the structure so I can apply it across multiple areas I will be re-doing.
Hi there. I don’t know hot to make the 3 cards inside my layout card to get aligned to the left and right side so thw 3 cards occupy the same width as the cards on top of them.
Hopefully the image will clarify:
Hi!
woo it’s not easy!
I’m trying to reproduce this layout :
But i’m lost…
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: repeat(3, 1fr)
grid-template-rows: repeat(3, 1fr)
cards:
- type: button
view_layout:
grid-column: span 2
grid-row: span 2
show_name: true
show_icon: true
tap_action:
action: toggle
entity: light.kitchen_lights
- &button
show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: light.kitchen_lights
- <<: *button
- <<: *button
- <<: *button
- <<: *button