Column gap and border-radius

Hello there :wave:

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 :slight_smile:

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!