Apply margin/padding in a mediaquery

[MadMaxMcKinney]

It would be great to apply a different margin to the layout based on the screen size. Especially when used with the grid-layout.

type: custom:grid-layout
    layout:
      grid-template-columns: 1fr 1fr 1fr
      grid-template-rows: auto
      grid-template-areas: |
        'header header header'
        'col1 col2 col3'
      grid-gap: 16px
      margin: 24px
      mediaquery:
        '(max-width: 900px)':
          grid-template-columns: 100%
          grid-template-areas: |
            "header"
            "col1"
            "col2"
            "col3"
          margin: 8px

Desktop sizes will need larger values compared to their mobile counterparts. Right now this doesn't appear to be supported. Setting max-width/width and gap would also be helpful!

[JshGrn]

Any update on this ? Really useful requirement, any chance of adding this @thomasloven ?

[thomasloven]

You could add empty grid areas of the correct size.

[JshGrn]

You could add empty grid areas of the correct size.

Thats hacky when some minor modification could be done to set the padding/margin dynamically based on the media query..

The code is already there right you are just filtering the options before processing?

I would be happy to pull this down, modify it and submit a PR, but I am inexperienced with HA addons so would need to spend some time getting myself familiar with them first.

[rursache]

still no update on this? i would like this feature

[JshGrn]

Doesn't look like it will be added, haven't actually had the time either to modify and test, looking at the code I can't see why it can't be added unless there is something I am missing.