Lovelace alignement with "lovelace-layout-card"

Two entities with % width

Insert new card "Layout Card"

Layout options (layout-card)

grid-template-columns: 30% auto

Editor code

type: custom:layout-card
layout_type: custom:grid-layout
layout:
    grid-template-columns: 30% auto
cards:
  - type: markdown
    content: 'The **Markdown** card allows you to write any text. '
  - type: markdown
    content: >
      The **Markdown** card allows you to write any text. You can style it
      **bold**, *italicized*, ~strikethrough~ etc. You can do images, links, and
      more.

Three entities with % width

Layout options (layout-card)

grid-template-columns: 40% auto
grid-template-areas: /
    "zonel zoneV"
    "zone2 zoneV"

Editor code

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  grid-template-columns: 40% auto
  grid-template-areas: / "zone1 zoneV" "zone2 zoneV"
cards:
  - type: entity
    entity: sensor.bureau_dht22_temperature
    view_layout:
       grid-area: zone1
  - type: entity
    entity: sensor.bureau_dht22_temperature
    view_layout:
        grid-area: zoneV
  - type: entity
    entity: sensor.bureau_dht22_temperature
    view_layout:
        grid-area: zone2

Fixed height

Layout options (layout-card)

grid-template-columns: 30% auto
grid-template-rows: auto 200px
grid-template-areas: |
  "zone1 zoneV"
  "zone2 zoneV"

Width 100% of the window

Go to your lovelace views and select "Edit Dashboard"
Click the pencil symbol next to the view name to open up the view properties
Select "Side bar" from the "View type" dropdown list
Click "Save"