Use and allow "gap" for grid layouts

[bratanon]

Make use of the css "gap" property and use it for grid spacing instead of the current styles

#root > * {
  margin: var(--masonry-view-card-margin, 4px 4px 8px);
}

The #root style would be

#root {
  display: grid;
  justify-content: stretch;
  gap: 8px; <----- NEW PROP
  margin: var(--layout-margin);
  padding: var(--layout-padding);
  height: var(--layout-height);
  overflow-y: var(--layout-overflow);
}

The benefits of this is that gap is settings the spacing only between elements inside of the grid, no we don't need to care about first and last rows, or the most left or right element inside the rows.

IE: A grid in a grid in a grid

There seems not to be any variable for this tho, like --masonry-view-card-margin but not sure that is needed anyway.

[bratanon]

Never mind, solved it with this code

- type: custom:mod-card
  card_mod:
    style: |
      :host {
        --masonry-view-card-margin: 0;
      }
  card:
    type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      ....
      margin: 0
      grid-column-gap: 8px
      grid-row-gap: 8px
    cards:
      .....