[SOLVED] [WebUI] Grid layout - column width

Hi everybody,

i’m still struggling with the grid layout of the f7 framework, and it’s somehow driving my nuts.
My goal is simple to creat a two column row where the first column has the automatic width of its content, and the second column fills the remaining content:

This is what i have so far:

uid: Garten_Cell
tags: []
props:
  parameters:
timestamp: May 10, 2021, 10:50:27 AM
component: f7-card
config:
  style:
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: var(--f7-card-expandable-box-shadow)
    backgroundImage: url(/static/Garten_comic.jpg)
    backgroundPosition: center
    backgroundSize: cover
    backgroundBlendMode: overlay
    background-color: "#ffffffc0"
slots:
  header:
    - component: Label
      config:
        text: Garten
        style:
          color: black
  content:
    - component: f7-row
      config:
        class:
          - no-gap
      slots:
        default:
          - component: f7-col
            config:
              style:
                background: blue
                width: auto
            slots:
              default:
              - component: f7-icon
                config:
                  f7: '=(items["Irrigation_Switch"].state === "ON") ? "drop_fill" : "drop"'
                  color: blue
                  size: 20px
          - component: f7-col
            config:
              style:
                background: yellow
                
            slots:
              default:
              - component: oh-link
                config:
                  action: toggle
                  actionItem: Irrigation_Switch
                  actionCommand: '=(items["Irrigation_Switch"].state === "ON") ? "OFF" : "ON"'
                  text: Bewässerung
                  style:
                    color: black
  footer:
    - component: Label
      config:
        text: Hier steht dann der Footer
        style:
          color: black

and the result looks like:
image

(don’t worry the ugly colors - they shall help me with the layout)

I don’t see a way to tell the second column to have a flexible width (auto sets it to the width of the text, and --webkit-fill-available will set it to the width of the cell)

Ideally it shall look like:
image

(i’ve used 10% and 90% width, but that would make the first column not a fixed size)

Can someone give me a slight push in the right direction?

Justify-content is the way to go. At least that seems to work :smiley:

  - component: f7-row
      config:
        style:
          justify-content: left