Width Of sections

Configuration Frontend
1

I have a question concerning the with of sections and the buttons below.
See print screens below. I’ve set the section witdth to 1. My Heading Card configuration to lay out 9, because I will only 2 or 3 buttons.
I’m thinking the buttons will stay inside the same lay out of the heading card. But one of the buttons goed besides the heading

So i get the following:

image
image510×344 20.4 KB

What is the measurement of width 1 in the section view

image
image751×398 9.75 KB

image
image732×454 12.5 KB

When I place it to 12, It is ok. But to wide in my opinion.

2

Post a simplified code of your section (only THIS section) & a picture made in MS Paint or similar of what you want to achieve.

3

Find below the YAML code for this section:

type: grid
cards:
  - type: heading
    heading: Badkamer
    heading_style: title
    badges:
      - type: entity
        entity: sensor.switchbot_badkamer_humidity
      - type: entity
        show_state: true
        show_icon: true
        entity: sensor.switchbot_badkamer_temp
    icon: mdi:bathtub
    grid_options:
      columns: 9
      rows: 1
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: light.licht_badkamer
    grid_options:
      columns: 3
      rows: 2
    name: Licht
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: climate.verwarming
    grid_options:
      columns: 3
      rows: 2
column_span: 1

Also below a image in MS paint, with the difference of width 9 and 12 in de layout of the heading card.

comparison
comparison591×278 18.7 KB

When I place it in width 12 the buttons stay nice below the heading card. When i place it in 9 it moves a button to the right side of the heading card.
Like so:

image
image551×244 9.92 KB

4

Format it properly

5

I think I’ve what you said

6

OK, but I am still not getting what you want.
This is a current layout:

изображение
изображение442×249 7.96 KB

If the heading card has “columns=12 (or full)”:

изображение
изображение435×252 6.88 KB

If you want to leave the right area unoccupied (MS Paint picture):

изображение
изображение438×253 7.12 KB

then it is not possible NOW - but soon be possible (hopefully) with some “spacing” card (currently developed).

simplified code of the section 
      - type: grid
        cards:
          - type: heading
            heading: Badkamer
            heading_style: title
            badges:
              - type: entity
                entity: zone.home
              - type: entity
                entity: zone.home
            icon: mdi:bathtub
            grid_options:
              columns: 9
              rows: 1
          - type: button
            entity: sun.sun
            grid_options:
              columns: 3
              rows: 2
          - type: button
            entity: sun.sun
            grid_options:
              columns: 3
              rows: 2
        column_span: 1
7

Indeed,
What I want is indeed to have last option. Where you can set the header card being the width of the section. Or following the width of the placed cards.

8

As I said - “columns=full”.

Placed where?