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
Hopefully someone can help me make sense of this. I have a layout with header, (potential) subheader, main, and some footer cards. While header and footer will adapt to screensize/width, my main area for some reason seems to want to align only with the box shown in the screenshot. Not sure what I am missing here, can anyone point me in the right direction with this code:
title: home
path: home
icon: mdi:home
theme: ios-dark-mode-blue-red
background: "var(--background-image)"
type: custom:grid-layout
layout:
margin: -0.5vh 1vh 0vh
card_margin: 0px 0px 0px 0px
grid-template-columns: auto
grid-template-rows: 17vh 2vh 61vh 2vh 9vh 9vh
grid-template-areas: |
"header"
"subheader"
"main"
"footer_title"
"footer"
"menu"
cards:
- type: custom:button-card # HEADER
view_layout:
grid-area: header
template: header
variables:
view: home
- type: custom:layout-card # MAIN
view_layout:
grid-area: main
layout_type: custom:vertical-layout
layout:
height: 61vh
margin: 0vh 0vh 0vh 0vh
padding: 0vh 0.4vh
cards:
#################MAIN AREA######################################
- type: vertical-stack
cards:
- type: custom:button-card
template: room_card
variables:
room_card_name: Schlafzimmer
room_card_icon: mdi:bed-king-outline
room_card_temp: sensor.bedroom_echo_temperature
entity_1: light.bedroom
entity_1_icon: mdi:bed-outline
entity_2: light.desklamp
entity_2_icon: mdi:desk-lamp
entity_3: light.bathroom
entity_3_icon: mdi:shower-head
media_player: media_player.40_tcl_roku_tv
climate: climate.living_room
popup_id: '#remote_bedroom'
climate_popup: '#climate_bedroom'
The beta is actually available 
I am having issues with the card_margin option inside a grid layout. It is not having an effect and if I am placing a grid inside a grid, the margins add up.
Tried card_margin: 0px 0px 0px 0px, card_margin: 0px 0px 0px 0px !important, card_margin: 0ā¦
check this:
and this: