Hello there
Currently just starting and learning everything there is about Home Assistant, it’s a ton of fun and now I’m looking to make some neat dashboards.
I’m wondering if anyone knows if it’s possible to change the spacing in grids and columns, like my attachment? Ideally also apply different border-radius depending on where the card would be in the configuration.
Dashboard 01 is how it is default, Dashboard 02 is what I’d like to achieve:
In Dashboard 02 it is clearer what belongs together, and I could make it very easy to see where one piece of content begins and one ends. It also could save some space while looking less cluttered at the same time.
These pointers and examples should help:
Managing layouts:
Ressembles your wish:
Custom radius for each corner:
upleft_radius:
styles:
card:
- border-radius: 30px 5px 5px 5px
upright_radius:
styles:
card:
- border-radius: 5px 30px 5px 5px
botleft_radius:
styles:
card:
- border-radius: 5px 5px 5px 30px
botright_radius:
styles:
card:
- border-radius: 5px 5px 30px 5px
all_radius:
styles:
card:
- border-radius: 15px
I figured it out after a lot of trial and error, so no help needed anymore. But! If anyone else is looking to do the same, here’s the way to do it.
1. Get the card-mod from Hacs page.
2. Add this to your theme config file:
# Grid gap customization using card-mod
grid-card-gap: 6px
masonry-view-card-margin: 6px 6px 12px
3. Add this to any card you wish to change
style: |
ha-card {
border-radius: 20px 20px 6px 6px;
}
Replace the values with anything you wish to have there
Here’s what my WIP looks like atm for reference
Thank you so much for your reply, and looks like interesting repos. Thomas Loven’s layout-card looks interesting, will give that a deeper look!