yeah thanks that is great to know.
I guess the issue is with the horizontal layout in that case, so the question stands
this is my swipe-card config:
- type: custom:swipe-card
parameters:
spaceBetween: 8
effect: coverflow
grabCursor: true
centeredSlides: false # to have the swipe card start left side
slidesPerView: 4 # to auto render the correct size of the buttons, 4 in a row always
coverflowEffect:
rotate: 50
depth: 100
modifier: 1
slideShadows : true
pagination:
type: bullets
hideOnClick: true
cards:
!include /config/lovelace/buttons/buttons_alerts_swipe.yaml
having it display for cards by default, even if there are less than 4 (to have the button-cards it displays always show the correct format of 4 in a row)
to give you an idea, the button_alerts_swipe lists the conditional button-cards like:
Could you perhaps assist me to create that in grid? I only need a vertical stack but with the column set to 96%. I tried myself but can’t get it to work.
Hi,
Thank you for the great update!
I create a nice layout using grid type in you card to fit 3 buttons in a row when on iPhone, and 5 buttons in a row when on bigger screens, which works perfectly.
This is the code:
However it always seems that the row height is slightly bigger then width, although the button inside is always with ratio 1/1.
Can you please advise if there is an option to set each item ration to 1/1, or maybe limit the height to be exactly as contained button inside?
Sorry to ask a question instead of providing an answer. But I think you have experience and can help me judging by your code.
Can you help me in how to create a layout card using grid that consists of only one column with a max width of 96%? Basically my goal is to have a column that is 96% of the screen width.
The previous card version could do that with vertical layout mode and had it working. But now with 2.0 I need to use grid layout according to card developer. It does not work with previous code.
Hi,
I myself only started to learn the grid options, Thomas actually put link to CSS Grid page which was a big help, suggest you to go over it.
Having said that, you can try something like this:
Hi @thomasloven,
I was trying the below grid layout in order to have 2px empty shoulders, however in my case the “.” areas are still being populated with cards.
Am I missing something here?
Hi @noxx ,
Happened to me as well, in fact it is still happening on my main Chrome browser. It will be refreshed at some point eventually.
However on other devices it was refreshed almost immediately.
The solution for Chrome is to use incognito mode for now, in order to work on HA changes, until it will be refreshed at some point.
Can’t mange with 2.0+. They where not perfect because filled more space than the other cards and had no separation between them, but I could control each card dimensions. Thanks for your work!!!
Hello guys, i’m trying to place a grid layout inside another one.
I’ll try to paste as less code as I can to explain:
title: Home
views:
- title: Home
path: home
icon: 'mdi:home-roof'
panel: false
type: custom:grid-layout
layout:
grid-template-columns: 7% auto 23%
grid-template-rows: 100%
grid-template-areas: |
"sidebarsx main sidebardx"
badges: []
cards:
- type: custom:stack-in-card #Used to apply styling, as Card-Mod doesn't work on Vertical-Stack
layout:
grid-area: sidebarsx
cards:
- Other Stuff for a left Sidebar...
- type: vertical-stack
layout:
grid-area: main
cards:
- type: 'custom:layout-card' <--- Here is my problem
layout_type: grid
layout:
grid-template-columns: 40% 60%
grid-template-rows: 100%
grid-template-areas: |
"left right free"
cards:
- type: 'custom:simple-weather-card'
layout:
grid-area: left
other stuff...
- type: 'custom:atomic-calendar-revive'
layout:
grid-area: right
entities:
- entity: calendar.casa # Use your Calendar entity
other stuff...
! I’m new to CSS and learning some stuff and will checkout grid. Thanks for your help!
