Hi, i have an issue trying to put some button-card inside a full grid-layout page (yaml mode)
Here is my grid configuration :
views:
- title: Principal
type: custom:grid-layout
path: 0
layout:
#default
grid-gap: var(--custom-layout-card-padding)
grid-template-columns: repeat(4, 1fr)
#grid-template-rows: 0 repeat(3, fit-content(100%)) 0fr
grid-template-rows: repeat(3, auto-fit) 0fr
justify-content: center
grid-template-areas: |
"chips chips chips chips ."
"ouvrants lumières autres maison ."
"ouvrants footer footer footer ."
"test5 footer footer footer ."
in the “ouvrants” area (Column 1 line 3), i want to set 3 button-card, while my number of columns is set to 2 :
#################################################
# #
# Ouvrants #
# #
#################################################
- type: grid
title: Ouvrants
view_layout:
grid-area: ouvrants
columns: 2
cards:
- type: custom:button-card
#template: card_binary_sensor
entity: binary_sensor.porte_entree_access_control_window_door_is_open
#aspect_ratio: 1/1
name: Entrée
layout: vertical
- type: custom:button-card
#template: card_binary_sensor
entity: binary_sensor.porte_entree_access_control_window_door_is_open
#aspect_ratio: 3/1
name: Entrée
- type: custom:button-card
#template: card_binary_sensor
entity: binary_sensor.porte_entree_access_control_window_door_is_open
#aspect_ratio: 3/1
name: Entrée
issue is that the third button-card is no positionning just under, but with a big blank space:
in fact, if we open developer tools, we can see that the aspect ratio of a button-card is 1/1, whatever are the properties set :
Is there a solution for the third button to be just under and to suppress the blank space?
i’ve tried playing with size, ratio, and “grid-template-rows”, but nothing works.
If someone can help 
Thanks.
