Thanks! I havenāt managed to get it to take up two rows yet, but atleast it is now centered in the middle.
I think it is specific of the card - its proportion, Layout card cannot force height of the card to be stretched. But I believe that for custom button car you can specify card proportions or size expplicitly. For size lets try:
type: 'custom:button-card'
entity: light.test_light
color_type: card
color: auto
name: 80px
styles:
card:
- height: 80px
- width: 30px`
For aspect:
type: custom:button-card
name: 2/1
icon: mdi:lightbulb
aspect_ratio: 2/1
more to be found here.
Thanks @mirekmal,
The top example with height is working for me (for some reason Iād never tried card-mod styles on the buttoncard itself). Fixing height seems to break the auto-sizing (suddenly my icons are weird etc) but with some trial and error Iāll be able to do what I want.
Aspect ratio isnāt working for me, I think it doesnāt like this being used in conjunction with the grid-area options.
so where is your - grid-template-columns: and - grid-template-rows: ?
Also, it would be easier to understand if you showed your cards view_layout as well
They arent there because no matter what I added for columns or rows nothing worked so I put the minimum information required to reproduce (as everyone keeps telling me to do).
ok, true in many cases , to narrow down the scope , and figure out where something is wrong
, but when defining a grid ( With row-span ! ( or column-span ), as you want ) ā¦ then columns and rows need to be define
columns and rows is what makes a grid !
Ordinarily I use those (and donāt use grid area) but with grid-area they are less critical.
If I wanted non-standard column width then Iād have needed to use columns with relevant % widths but since it was just 25% for each then it already gets this from my 4 grid areas.
I then tried messing with rows (since I thought that would do what I needed) but in practice this just affected the size of each row, not the placement of the cards (i.e. it could make the row double height but the cards themselves were still only single-height)
use
grid-template-columns: 25% repeat(4)
grid-template-rows: auto
grid-template-areas: |
"boot carrl carfl hood"
"boot carrr carfr hood"
PS: Donāt forget the
view_layout:
grid-area: boot
this defines in which area a specific card is placed, and have to be āattachedā to every ābottom-cardā , whether itās a single button-card(bottom-card), or a stack of cards in vertical/horizontal stack(bottom-card)
And as Mirek said above, the card specifics ( which you also havenāt showed ), try 1/2 , who knows
Get use to post everything which are relevant to your problems, meaning the whole grid definition and atleast the first card here ( which you want to fill 2 rows )
So Iāve landed on the below, using the card height (place-self: center stretch actually not required if the height is full). Now I need to head over to the button-card page to work out why my buttons are inaccurately representing state 
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-areas: |
"boot carrl carfl hood"
"boot carrr carfr hood"
cards:
- type: custom:button-card
entity: sensor.edy87b_lock
show_state: true
show_name: false
icon: mdi:car-back
styles:
card:
- height: 160px
- width: 100px
state_display: '[[[ return entity.attributes.decklidstatus ]]]'
view_layout:
grid-area: boot
- type: custom:button-card
entity: sensor.edy87b_lock
label: Front Left
show_state: true
show_name: false
state_display: '[[[ return entity.attributes.doorstatusfrontleft ]]]'
view_layout:
grid-area: carfl
- type: custom:button-card
entity: sensor.edy87b_lock
label: Front Left
show_state: true
show_name: false
state_display: '[[[ return entity.attributes.doorstatusfrontright ]]]'
view_layout:
grid-area: carfr
- type: custom:button-card
entity: sensor.edy87b_lock
label: Front Left
show_state: true
show_name: false
state_display: '[[[ return entity.attributes.doorstatusrearleft ]]]'
view_layout:
grid-area: carrl
- type: custom:button-card
entity: sensor.edy87b_lock
label: Front Left
show_state: true
show_name: false
state_display: '[[[ return entity.attributes.doorstatusrearright ]]]'
view_layout:
grid-area: carrr
- type: custom:button-card
entity: sensor.edy87b_lock
label: Front Left
show_state: true
show_name: false
icon: mdi:car-cog
styles:
card:
- height: 160px
- width: 100px
state_display: '[[[ return entity.attributes.doorstatusfrontleft ]]]'
view_layout:
grid-area: hood
place-self: center stretch
1 Like
I specifically told you to try and solve this yourself with the layout card when you first posted it in the mushroom thread.
You need to be willing to put in minimal effort yourself before people will help you.
So give it a go to try and solve it yourself by reading posts in this thread. Then if you get severely stuck somewhere post the code that have got to here.
4 Likes
You make 1 small column, and 3 wide columns
Edit: Here is a simple layout (example)
Here you have to use i.e ājustifyā and a good advice is, use % for the cell content & columns to adapt to smaller ViewPorts
1 Like
I am using layout-card with a grid layout to display 3 button cards along a top row, and 6 thermostat cards - 3 per row across 2 rows, like this:
When viewing on my tablet, there is a fair bit of vertical scrolling in order to view the bottom row of cards fully. It doesnāt look like a huge amount in the above picture, but the scrolling seems to be caused due to the amount of padding around each of the 6 thermostat cards. Iāve left the thermostat card borders visible to help show this.
This is being displayed within a browser mod popup window, in fullscreen mode, using the following code:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Heating
#timeout: 60000
size: fullscreen
content:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
margin: 0
grid-template-columns: auto
grid-template-rows: 10% auto auto
grid-template-areas: |
"controls controls controls"
"lounge kitchen hall"
"spare office main"
mediaquery:
#phone
"(max-width: 800px)":
grid-template-columns: 1fr 1fr
grid-template-rows: auto
grid-template-areas: |
"controls controls"
"lounge kitchen"
"hall office"
"spare main"
cards.....:
How can I reduce this padding or gap between each of the 6 thermostat card borders, and the grid area that it sits within?
Iām having an issue with padding being on my layout-card even though I have specified 0. Basically I have a main layout card dividing my space into an upper and lower, then another inside of each of those space dividing it furtherā¦ I have all the margins to 0 and padding to 0, but I am still getting padding.
Here is some example code. The padding is, for example, on the buttons on the ārightā. When I look with development tools I am seeing
#root > * {
margin: var(--masonry-view-card-margin, 4px 4px 8px)
}
On the āā itself. If I manually set those to 0 its all fixed. But why are they even there? How can I fix it either with the layout card or card-mod? Thanks.
- title: Overview
path: overview
type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 50vw 50vw
grid-template-rows: min-content minmax(0, 1fr)
grid-template-areas: |
"header-buttons header-buttons"
"main-left main-right"
height: calc(100vh - 60px)
margin: 0px 0px 0px 0px !important
card_margin: 0px 0px 0px 0px !important
padding: 0px 0px 0px 0px !important
cards:
##########################################################################
##
## Chips
##
##########################################################################
- type: custom:layout-card
layout_type: custom:grid-layout
view_layout:
grid-area: header-buttons
layout:
grid-template-columns: auto
grid-template-rows: auto
height: 100%
place-content: end center
margin: 0px 0px 0px 0px !important
card_margin: 0px 0px 0px 0px !important
padding: 0px 0px 0px 0px !important
cards:
- type: horizontal-stack
cards:
- type: "custom:button-card"
template: chip_icon_label
label: Label
icon: "mdi:heart"
- type: "custom:button-card"
template: chip_icon_label
label: Label
icon: "mdi:heart"
- type: "custom:button-card"
template: chip_icon_label
label: Label
icon: "mdi:heart"
- type: "custom:button-card"
template: chip_icon_label
label: Label
icon: "mdi:heart"
- type: "custom:button-card"
template: chip_icon_label
label: Label
icon: "mdi:heart"
##########################################################################
##
## Left
##
##########################################################################
- type: custom:layout-card
layout_type: custom:grid-layout
view_layout:
grid-area: main-left
layout:
grid-template-columns: auto
grid-template-rows: min-content minmax(0, 1fr)
height: 100%
margin: 0px 0px 0px 0px !important
card_margin: 0px 0px 0px 0px !important
padding: 0px 0px 0px 0px !important
cards:
- type: custom:clock-weather-card
entity: weather.accuweather_accuweather
title: Home
sun_entity: sun.sun
- type: "custom:atomic-calendar-revive"
card_mod:
style: |
.cal-card {
overflow: hidden !important;
}
entities:
- entity: calendar.e
name: "e"
##########################################################################
##
## Right
##
##########################################################################
- type: custom:layout-card
layout_type: custom:grid-layout
view_layout:
grid-area: main-right
card_mod:
style: |
--masonry-view-card-margin: 0px
layout:
grid-template-columns: 50% 50%
grid-template-rows: auto
height: 100%
margin: 0px 0px 0px 0px !important
card_margin: 0px 0px 0px 0px !important
padding: 0px 0px 0px 0px !important
cards:
- type: "custom:button-card"
template:
- emf_room_card
name: Family Room
icon: mdi:sofa-outline
entity: switch.zb_family_room_lamps
- type: "custom:button-card"
template:
- emf_room_card
name: Family Room
icon: mdi:sofa-outline
entity: switch.zb_family_room_lamps
- type: "custom:button-card"
template:
- emf_room_card
name: Family Room
icon: mdi:sofa-outline
entity: switch.zb_family_room_lamps
- type: "custom:button-card"
template:
- emf_room_card
name: Family Room
icon: mdi:sofa-outline
entity: switch.zb_family_room_lamps
- type: "custom:button-card"
template:
- emf_room_card
name: Family Room
icon: mdi:sofa-outline
entity: switch.zb_family_room_lamps
- type: "custom:button-card"
template:
- emf_room_card
name: Family Room
icon: mdi:sofa-outline
entity: switch.zb_family_room_lamps
- type: "custom:button-card"
template:
- emf_room_card
name: Family Room
icon: mdi:sofa-outline
entity: switch.zb_family_room_lamps
- type: "custom:button-card"
template:
- emf_room_card
name: Family Room
icon: mdi:sofa-outline
entity: switch.zb_family_room_lamps
place this in your theme, should do the trick.
Because the author/creator thought so, people/devs are creative people with different perspectives and minds, just like you and me things different ( beside in this case , i also prefer no margins or padding, unless im stated so my self.
4 4 8 seems to some kind of standard, which came to the ādraw-boardā some generations back, and now some are just using this (just because) for no particular reason
Any way to do it without modifying the theme? Like with card mod?
Itās causing this misalignment at the bottom between the left and right.
if you have card_mod questions, ask in the huge Card_Mod Topic, itās there for the same reason
Looking for something else but really like your āpersonā cards, how did you do these?
Using these settings to get one big card. Works fine on computer screens and tablets but not on mobile phones. It isnāt even to possible to scroll horizontal direction. How can this be resolved?
Maybe using grid-layout
the width you use there ( in the View ) is in px
in grid you can use 1 column 100% ( will fill any screen )
views:
- title: Home
type: custom:grid-layout
layout:
grid-template-columns: 100%
grid-template-rows: xx